box-shadowでボックスの影をつけることができる【CSS】

box-shadowはボックスに影をつけるためのプロパティです。

値の指定方法

box-shadowプロパティでは、長さ・ぼかし半径・広がり・色・固定値などを指定します。固定値は影を内側に表示させたりすることができる指定です。

影の長さ

単位付きの数値で長さを指定します。

値は半角スペースで区切って2つ指定し、1つ目の値が水平方向に、2つ目の値が垂直方向に適用されます。

水平方向の値を指定するときに、正の値を指定すれば右方向に、負の値を指定すれば左方向にどれぐらいの長さの影をつけるかが決まります。

垂直方向の値を指定するときは、正の値を指定すれば下方向に、負の値を指定すれば上方向にどれぐらいの長さの影をつけるかが決まります。

たとえば上のボックスは、水平方向・垂直方向ともに正の値を指定した場合で、ボックスの影は右下に表示されます。

一方このボックスは、水平方向・垂直方向ともに負の値を指定した場合で、ボックスの影は左上に表示されます。

関連記事
『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』

影のぼかし半径

ぼかす半径は影をどれくらいぼかすかというもの。

これも長さ同様、単位付きの数値で指定します。ただし、負の値は指定できません。

以下の例を見ればわかりますが、ぼかし半径の値を大きくすればするほど、ボックスの影のぼかしが強くなります。

影の広がり

ボックスの影をどれくらい広げるか、その広がりも単位付きの数値で指定します。

また、負の値を指定することもできますが、影の形が収縮してしまいます。

影の色

影の色はキーワードまたはカラーコードで指定します。

関連記事
『CSSの色の指定方法まとめ！RGBモデルやHSLモデル【CSS】』

固定値

noneを指定すると、影は表示されません。

insetを指定すると、ボックスの内側に影が表示されます。