要素に影(ドロップシャドウ)を付ける 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軸の距離 ぼかしの長さ 広がりの長さ 色;
						

サンプル

sample 1

sample 2

sample 3

sample 4

sample 5

sample 6

sample 7

sample 8

sample 9

sample 10

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

外側

内側

複数の影を指定

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

サンプル

外と内

応用編(様々な影の表現)

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

サンプル

サンプル

CSS3逆引きリファレンス一覧へ戻る