CSSボックスシャドウの作り方
外側または内側の影を1層生成し、確認した値をコピーします。
- XとYのずれを入力します。
- ぼかしと広がりを設定します。
- 色と不透明度を入力します。
- 外側または内側を選びます。
- 生成して見本を確認し、コピーします。
4つの長さ
XとYは影を移動します。ぼかしは負数不可で、広がりは正なら拡大、負なら縮小します。
外側と内側
insetは箱の内側に描きます。外側の影はレイアウト寸法を変えません。
確定状態
編集やクリアで古い見本とコピー値を無効にします。
対応範囲
- 影は1層のみ。
- 複数レイヤー、全体デザイン、アニメーションは非対応。
例
12px 12px 24px 0 rgba(0,0,0,.3).
inset 0 4px 8px -2px rgba(0,0,0,.5).
よくある質問
ぼかしは負数にできますか？
いいえ。CSSでは無効です。
広がりは負数にできますか？
はい。影の形を縮小します。