Question 1

CSSのbox-shadowプロパティの書き方は？

Accepted Answer

box-shadow: 水平 垂直 ぼかし 広がり 色の形式で指定します。例えば「box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2)」は右下に影を付けます。insetを付けると内側の影になります。

Question 2

box-shadowはパフォーマンスに影響しますか？

Accepted Answer

大きなぼかし値や複数の影はレンダリングコストが高くなります。特にアニメーションと組み合わせる場合は注意が必要で、will-changeプロパティの活用やfilter: drop-shadow()の検討を推奨します。

Question 3

複数の影を重ねたリッチなシャドウ効果は作れますか？

Accepted Answer

はい、box-shadowはカンマ区切りで複数の影を指定できます。異なるぼかしと色の影を重ねることで、Material Designのようなリアルなシャドウ効果を表現できます。

テキストシャドウ生成

よくある質問