box-shadow とは?
複数レイヤーの CSS box-shadow をライブプレビュー、inset 切替、精密コントロールで作成。
box-shadow は、要素の外側(または内側)に 1 つ以上の影を描く CSS プロパティです。
各影は水平/垂直オフセット、ぼかし半径、任意の拡がり、アルファ付きの色で構成され、inset を付けると内側の影になります。
複数レイヤーはカンマ区切りで、影を重ねて奥行き、発光、くっきりした縁などを作れます。
- 小さなオフセットと大きめのぼかしで柔らかな浮遊感。
- 高い不透明度と小さめのぼかしでシャープな縁。
- 外側と内側の影を組み合わせて奥行きを追加。
- パフォーマンスのためレイヤー数は控えめに。