[CSS]filterを使ってシャドウをつけよう

borderに対して影をつけるときによく使われるのがbox-shadow

/* 例 */
box-shadow: 2px 2px 5px 5px #000000;

ただし、この書き方だとborder-widthやborder-radius等を組み合わせて作った三角形・丸・矢印や透過PNGに対して適切にシャドウをつけることができない。

(borderを無視して要素のボックス範囲にシャドウがかかるため)

こんなときは、filterを使うと特殊な図形に適切にもシャドウをつけることができる。

/* 例 */
filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.3));