書式
box-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 rgba(赤の輝度, 緑の輝度, 青の輝度);
box-shadow: rgba(赤の輝度, 緑の輝度, 青の輝度) X方向のオフセット Y方向のオフセット ぼかし具合;
box-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 拡幅サイズ rgba(赤の輝度, 緑の輝度, 青の輝度);
box-shadow: rgba(赤の輝度, 緑の輝度, 青の輝度) X方向のオフセット Y方向のオフセット ぼかし具合 拡幅サイズ;
説明
ボックスに半透明の影を付けるにはbox-shadowで色指定を行う際にrgba()を使います。rgba()では色の不透明度を指定することができます。そこで、4番目のパラメータに不透明度を指定すれば半透明の影を表示することができます。値は0.0が完全な透明、1.0が完全な不透明になります。
なお、古いブラウザで反映されない場合にはベンダープレフィックスを付けてみてください。
h1 {
border: 1px solid black;
width: 500px;
box-shadow : 10px 8px 5px rgba(255,0,0, 0.25);
}
目次に戻る