box-shadowはもう古い？drop-shadowなら疑似要素にもSVG画像にも影がつく！

box-shadowについて

CSSでボックスに影を付けると言えば？
box-shadow です。

box-shadowはよく使っていると思いますのでさらっとおさらい。

box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5)　って感じで書きます。
左から順に　 X軸 Y軸 ブラー半径 スレッド半径 影の色 となります。

「影の色」は #000でも良いですが、rgba(0, 0, 0, 0.5)とする事でalpha値を使えるので透明度が調整できます。

内側に影を付けたい時は最後に inset と付け足してください。

.basic1 {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5);
}
.basic2 {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5) inset;
}

basic1：普通に影をつけたもの
basic2：insetで内側に影をつけたもの

drop-shadowで疑似要素に影をつける

box-shadow と大きな違いはないです。
記述方法は少し違いますが…

むしろ、影をつけるだけなら box-shadow で十分です。
じゃ、いらねーじゃん？

ところが、擬似要素の場合、うまく影がつかないんです。
（擬似要素ってのは ::before ::after とかのやつね）

.basic3 {
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.basic4 {
  filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

疑似要素で三角形を作って吹き出しにしたものです。

basic3：疑似要素部分の三角形に影がつきません。
basic4：drop-shadowなら、疑似要素にもちゃんと影がつきます。

drop-shadowでSVG画像に影をつける

そして、SVG画像！
SVG画像に box-shadow の場合、SVG画像の周りに四角い影が付いてしまいます。
drop-shadow 場合、SVG画像に合わせた影が付くのです！
これすごくない？

.basic5 img {
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.basic6 img {
  filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

basic5：SVGの中身ではなく周りに影がついてしまう。
basic6：SVGのパスに沿って影をつけてくれる。

ね？
SVG画像にも綺麗に影がついたでしょ？