CSSボックスシャドウプロパティ

さまざまな<div>要素に影を追加します。

#example1 {
box-shadow: 5px 10px;
}

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

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

プロパティは、box-shadow1つまたは複数のシャドウを要素にアタッチします。

デフォルト値：	なし
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.boxShadow = "10px 20px 30px blue"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

注：要素に複数の影を付けるには、影のコンマ区切りリストを追加します（以下の「自分で試す」の例を参照）。

Value	Description	Play it
none	Default value. No shadow is displayed
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
color	Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

ヒント： 許可される値（CSSの長さの単位）についてもっと読む

影にぼかし効果を追加します。

#example1 {
box-shadow: 10px 10px 8px #888888;
}

影の広がり半径を定義します。

#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}

複数の影を定義します。

#example1 {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

挿入キーワードを追加します。

#example1 {
box-shadow: 5px 10px inset;
}

テーブルに投げられた画像。この例は、「ポラロイド」画像を作成して画像を回転させる方法を示しています。

div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}