要素に影（ドロップシャドウ）を付ける box shadow (drop shadow)

影（ドロップシャドウ）について

要素に影を付ける場合はbox-shadowプロパティを使用します。
指定方法は以下の2つがあり、1つ目で通常の外側、2つ目のinsetを指定することで内側に影を付けることができます。
また、ぼかし、広がり距離、色は省略でき、色を省略した場合は文字色と同色が反映されます。

【構文】

							box-shadow:X軸の距離 Y軸の距離;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ 色;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ 色;
						

【構文（inset）】

							box-shadow:inset X軸の距離 Y軸の距離;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ 色;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ 色;
						

サンプル

/* 外側 */ div.sample1 { -webkit-box-shadow:2px 2px; -moz-box-shadow:2px 2px; box-shadow:2px 2px; } div.sample2 { -webkit-box-shadow:2px 2px 2px; -moz-box-shadow:2px 2px 2px; box-shadow:2px 2px 2px; } div.sample3 { -webkit-box-shadow:2px 2px 0 2px; -moz-box-shadow:2px 2px 0 2px; box-shadow:2px 2px 0 2px; } div.sample4 { -webkit-box-shadow:2px 2px 2px 2px; -moz-box-shadow:2px 2px 2px 2px; box-shadow:2px 2px 2px 2px; } /* 内側 */ div.sample5 { -webkit-box-shadow:2px 2px 2px 2px #00d; -moz-box-shadow:2px 2px 2px 2px #00d; box-shadow:2px 2px 2px 2px #00d; } div.sample6 { -webkit-box-shadow:inset 2px 2px; -moz-box-shadow:inset 2px 2px; box-shadow:inset 2px 2px; } div.sample7 { -webkit-box-shadow:inset 2px 2px 2px; -moz-box-shadow:inset 2px 2px 2px; box-shadow:inset 2px 2px 2px; } div.sample8 { -webkit-box-shadow:inset 2px 2px 0 2px; -moz-box-shadow:inset 2px 2px 0 2px; box-shadow:inset 2px 2px 0 2px; } div.sample9 { -webkit-box-shadow:inset 2px 2px 2px 2px; -moz-box-shadow:inset 2px 2px 2px 2px; box-shadow:inset 2px 2px 2px 2px; } div.sample10 { -webkit-box-shadow:inset 2px 2px 2px 2px #00d; -moz-box-shadow:inset 2px 2px 2px 2px #00d; box-shadow:inset 2px 2px 2px 2px #00d; }

また、水平方向の位置、垂直方向の位置に負の値を指定することで、逆方向に影が付くようになります。

/* 外側 */ div.sample1 { -webkit-box-shadow:-2px -2px 3px 0 #000; -moz-box-shadow:-2px -2px 3px 0 #000; box-shadow:-2px -2px 3px 0 #000; } /* 内側 */ div.sample2 { -webkit-box-shadow:inset -2px -2px 3px 0 #000; -moz-box-shadow:inset -2px -2px 3px 0 #000; box-shadow:inset -2px -2px 3px 0 #000; }

複数の影を指定

カンマで区切ることにより、1つの要素に対して複数の影を付けることが可能です。

サンプル

div.sample { -webkit-box-shadow:2px 2px 3px 0 #000, inset 2px 2px 3px 0 #d00; -moz-box-shadow:2px 2px 3px 0 #000, inset 2px 2px 3px 0 #d00; box-shadow:2px 2px 3px 0 #000, inset 2px 2px 3px 0 #d00; }

応用編（様々な影の表現）

影やその他のプロパティを使用することで、影の様々な表現が可能です。

div.sample { -webkit-box-shadow:0 5px 5px -5px #000; -moz-box-shadow:0 5px 5px -5px #000; box-shadow:0 5px 5px -5px #000; } div.sample { -webkit-box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 2px 0 #fff, inset -2px -2px 2px 0 #ddd; -moz-box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 2px 0 #fff, inset -2px -2px 2px 0 #ddd; box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 2px 0 #fff, inset -2px -2px 2px 0 #ddd; }