ボックスに複数の影を付ける

書式

box-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 色, 左と同じパラメータ,...;
box-shadow: 色 X方向のオフセット Y方向のオフセット ぼかし具合, 左と同じパラメータ,...;
box-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 拡幅サイズ 色, 左と同じパラメータ,...;
box-shadow: 色 X方向のオフセット Y方向のオフセット ぼかし具合 拡幅サイズ, 左と同じパラメータ,...;

説明

ボックスに複数の影を付けるにはbox-shadowに影のオフセット(ずれ具合/移動量)、ぼかし具合、色を1セットとしてカンマで区切って指定します。表示したい影の数だけ指定します。
なお、古いブラウザで反映されない場合にはベンダープレフィックスを付けてみてください。IE9とOperaではベンダープレフィックスバージョンはサポートしていません。

サンプル サンプルを実行 サンプルをダウンロード

h1 {
border: 1px solid black;
width: 500px;
box-shadow : 10px 8px 5px red;
}
目次に戻る