いつも何気無く使用しているbox-shadowですが、ここで見直しのため、色々な設定パターンを書き留めておきます。

スポンサーリンク

書式

box-shadow: 横方向の長さ 縦方向の長さ ぼかし 広がり 影の色 影の方向

横方向の長さ
正の値でボックスの右側に影が伸び、負の値でボックスの左側に影が伸びます。

縦方向の長さ
正の値でボックスの下に影が伸び、負の値でボックスの上に影が伸びます。

ぼかし
負の値は設定できません。値が大きいほど影のエッジがぼやけていきます。

広がり
正の値で影を全方向に拡大します。負の値で縮小します。

影の方向
「inset」を設定するとボックスの内側に影ができます。

横方向と縦方向を設定したパターン

box-shadow: 8px 8px #000;

box-shadow: 0px 8px #000;　縦方向のみに値をセットするとボックスの下に影ができます。

box-shadow: 8px 0px #000;　横方向のみに値をセットするとボックスの右に影ができます。

box-shadow: 8px -8px #000; 縦方向をマイナスにすると上に影ができます。

box-shadow: -8px 8px #000;　横方向をマイナスにすると影が左側にできます

box-shadow: -8px -8px #000;

ぼかしを設定したパターン

box-shadow: 8px 8px 8px #000;

box-shadow: 8px 8px 16px #000; ぼかしを16pxにすると上のパターンよりぼやけて影が薄くなっています。

box-shadow: 0px 0px 8px #000;　横・縦方向の値を０にするとボックスの周りに影ができます。

box-shadow: 0px 8px 8px #000;

box-shadow: 8px 0px 8px #000;

広がりを設定したバターン

box-shadow: 8px 8px 0px 8px #000;　横・縦それぞれに広がりの値の影が増えます。

box-shadow: 8px 8px 8px 8px #000;　上のパターンにぼかしを追加しました。

box-shadow: 8px 8px 8px -8px #000;　広がりをマイナスにすると浮いた感じになります。

box-shadow: 0px 8px 8px -8px #000;　横方向の値を０にしても浮いた感じになります。

box-shadow: 8px 0px 8px -8px #000;　縦方向の値を０にしてもいまいち浮いた感じにはなりません。

box-shadow: 0px 0px 8px -4px #000;　横・縦方向の値を０にして広がりをマイナスにするとボックスの周りに少し影ができます。

box-shadow: 0px 0px 0px 8px #000;　横・縦方向とぼかしの値を０にして広がりをプラスにするとボックスの周りにはっきり影ができます。

box-shadow: 0px 0px 8px 8px #000;　横・縦方向の値を０にして広がりをプラスにするとボックスの周りにぼやけた影ができます。

内側につくる

box-shadow: 0px 0px 8px 8px #000 inset;　「inset」を設定すると内側に影ができます。

複数設定する

box-shadow: 0px 0px 0px 8px #00f, 0px 0px 0px 16px #0ff, 0px 0px 0px 24px #0f0;
カンマで区切れば、複数設定できます。このパターンはぼかしを０にしています。

box-shadow: 0px 0px 8px 8px #00f, 0px 0px 8px 16px #0ff, 0px 0px 8px 24px #0f0;
このパターンはぼかしを８に設定しています。