CSS box-shadow 属性

定義と使用法

box-shadow属性はボックスに1つまたは複数の影を追加します。

ヒント：美しい拡張可能なボタンを作成するためにborder-image-*属性を使用してください！

参照も：

CSS3チュートリアル：CSS3 边框

HTML DOMリファレンスマニュアル：boxShadow属性

例

div要素にbox-shadowを追加します：

div
{
box-shadow: 10px 10px 5px #888888;
}

自分で試してみる

ページの下部にさらに多くの例があります。

CSS语法

box-shadow: h-shadow v-shadow blur spread color inset;

注釈：box-shadowはボックスに1つまたは複数の影を追加します。この属性は、カンマで区切られた影のリストで、各影は2-4つの長さ値、オプションの色値、およびオプションのinsetキーワードで指定されます。長さ値を省略すると0になります。

属性値

値 説明 テスト
h-shadow 必須。水平影の位置。負の値も許可されます。 テスト
v-shadow 必須。垂直影の位置。負の値も許可されます。 テスト
blur オプション。ぼかしの距離。 テスト
spread オプション。影のサイズ。 テスト
color オプション。影の色。CSSの色値を参照してください。 テスト
inset オプション。外部影（outset）を内部影（inset）に変更します。 テスト

技術的詳細

デフォルト値： none
継承性： no
バージョン： CSS3
JavaScript语法： object.style.boxShadow="10px 10px 5px #888888"

さらに多くの例

机の上に投げた画像
「ポラロイド」画像の作成方法と画像の回転方法を示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

prefixを使用する最初のバージョンの数字は、-webkit-または-moz-で表されます。

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5