要素に影を落とすスタイル。
影の方向と距離、ぼかしの大きさと濃度、色を指定できる。複数指定可能。
画像に指定した場合、透明度は無視される。
フィルターのドロップシャドウを利用すれば画像の透明度を考慮して影を落とすことができるが、ボックスシャドウはより多くの端末に対応している上、安定している。
デモ
注意
- 処理が重いため多用は控えること。
応用例
See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu (@haibnu) on CodePen.