CSSのbox-shadowとは？
CSSのbox-shadowプロパティは、HTML要素に1つ以上のシャドウ効果を追加するために使用されます。シャドウの位置（X・Yオフセット）、ぼかし具合（ブラー）、サイズ（スプレッド）、色と透明度を自由に設定できます。カードコンポーネント、ボタン、モーダルダイアログ、入力フィールドなど様々なUI要素に立体感と深みを与えるために広く活用されています。
各パラメータの説明
構文の順番は [inset] offset-x offset-y [blur-radius] [spread-radius] color です。offset-xとoffset-yは必須で、シャドウが元の要素からどれだけ移動するかを決めます。ブラーはシャドウのエッジの柔らかさを制御し、スプレッドはシャドウ自体のサイズを拡大・縮小します。insetキーワードを先頭に追加すると、外側ではなく要素の内側にシャドウが適用されます。
自然なシャドウデザインのコツ
自然なシャドウは光源が上にある想定でYオフセットを正の値にし、ブラーを適度に設定するのが一般的です。rgba()で半透明の色を使うと、ソリッドカラーより柔らかく洗練された印象になります。ニューモーフィズムスタイルでは明るいシャドウと暗いシャドウを同時に適用して立体的な効果を出します。
よくある質問（FAQ）
Q. box-shadowとfilter: drop-shadowの違いは何ですか？
A. box-shadowは要素のボックスモデルの形状にシャドウを適用します。filter: drop-shadow()はPNGの透明部分を認識して実際の画像の形状に合ったシャドウを生成します。不規則な形のアイコンや画像にはdrop-shadowの方が自然です。
Q. 複数のシャドウを適用できますか？
A. はい、カンマで区切って複数のbox-shadowを同時に適用できます。最初に書いたシャドウが上にレンダリングされます。例: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
Q. パフォーマンスに影響しますか？
A. box-shadowはGPUアクセラレーションを受けないため、複雑なシャドウを大量に使うとレンダリングパフォーマンスに影響する場合があります。アニメーションで使用する場合はopacityの変化や疑似要素を活用する方がパフォーマンス上有利です。