[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));