ボックスに影を付ける

書式

box-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 色;
box-shadow: 色 X方向のオフセット Y方向のオフセット ぼかし具合;
box-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 拡幅サイズ 色;
box-shadow: 色 X方向のオフセット Y方向のオフセット ぼかし具合 拡幅サイズ;

説明

ボックスに影を付けるにはbox-shadowに影のオフセット(ずれ具合/移動量)、ぼかし具合、色を指定します。ぼかし具合は値が大きくなるほど影がぼやけます。色はCSS3で指定可能なカラー名や値などを使うことができます。
また、パラメータには影の拡幅サイズを指定することができます。値を負数にすると影の表示範囲が小さくなります。 ボックスに指定した影は子要素には継承されません。
なお、古いブラウザで反映されない場合にはベンダープレフィックスを付けてみてください。

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

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