box-shadowとは？

box-shadowは、CSSで要素の周囲または内側へ影を付けるプロパティです。影はレイアウトの寸法を広げず、要素の外観として描画されます。

box-shadow: X Y blur spread color;
box-shadow: inset X Y blur spread color;

4つの数値の順番

最初の数値がX方向、2番目がY方向、3番目がぼかし（blur）、4番目が広がり（spread）です。Xの正値は右、負値は左、Yの正値は下、負値は上へ影を動かします。

blurは影のぼかし量です。0なら輪郭がはっきりし、大きくするほどぼけます。CSS仕様上、blurへ負値は使えません。

spreadは影の広がりです。正値で外側へ広がり、負値で縮みます。blurとは別の働きです。

通常のbox-shadowは要素の外側へ描画されます。insetを指定すると、同じ設定を内側の影へ切り替えられます。

複数の影はカンマ区切りで指定できます。先に指定した影ほど手前に描画されます。このツールでは一番上の「影1」をCSSの先頭へ出力します。

box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.1),
  0 12px 24px rgba(0, 0, 0, 0.15);

透明度100%未満ではrgba()を生成し、100%ではHEXを出力します。3桁HEXは6桁へ展開し、大文字へ正規化します。

box-shadowとは？

CSSで要素の外側または内側へ影を付けるプロパティです。

box-shadowの4つの数値は何ですか？

X方向、Y方向、blur、spreadの順です。

blurにマイナス値は使えますか？

使えません。blurの負値はCSS仕様上無効です。

spreadにマイナス値は使えますか？

使えます。負値にすると影の広がりが縮みます。

内側に影を付けるには？

insetを使用します。各影ごとに切り替えられます。

複数の影を重ねられますか？

はい。カンマ区切りで最大8個まで生成できます。

影の透明度はどう指定しますか？

0～100%で入力し、必要に応じてalpha付きのrgba()へ変換します。

box-shadowはレイアウトサイズを広げますか？

いいえ。影はレイアウト計算の寸法を広げません。