層を重ねて奥行きを表現

単一の影は単純な浮き上がりに向いています。層を追加すると近くの暗い縁と広い柔らかな影を組み合わせられます。CSSでは先に列挙した影が上になるため、鋭い層を見せたいときは先頭にします。

位置、ぼかし、広がり

水平・垂直位置で影を移動し、ぼかしで縁を柔らかくします。正の広がりはぼかし前に影を広げ、負の値は縮めます。実用的なピクセル範囲で応答性と宣言の使いやすさを保ちます。

insetを有効にするとボックス内に影を描き、押された操作部や凹んだパネルに使えます。不透明度はコピーするCSSのrgba()アルファ値に変換します。プレビューとCSSはブラウザー内で生成します。

よくある質問

何層追加できますか？

最大8層です。少ない層のほうが調整やスタイルシートの保守が容易です。

負の広がりの効果は？

ぼかし前の影の形を縮めます。大きなぼかしをボックスの縁に近い位置から始められます。

普通のスタイルシートで使えますか？

はい。ピクセル長とrgba()色による標準box-shadow宣言です。

どのサイトでも同じ表示ですか？

ブラウザーのCSS描画を使いますが、周辺背景、角丸、要素サイズや他のスタイルで最終表示は変わります。