CSSで影を付けるアイツらの違い（box-shadowとdrop-shadow）

最近は古いブラウザのことを忘れて比較的新しいCSSのプロパティが書けるようになってきて幸せですよね。
技術検証ならいざしらず、実際の業務では案外古いブラウザまで対象にしなきゃいけなくてせっかく覚えたCSSプロパティが使えないなんてことはしょっちゅうです。

さて、そんな「新し目」のCSSプロパティを使うと流行り（？）のマテリアルデザインっぽい影を簡単に付けることができます。
でも調べてみると

#box {
  box-shadow: 10px 10px 2px #000;
}

という書き方と

#box {
  filter: drop-shadow(10px 10px 1.5px #000);
}

という書き方の2つが見つかります。
HTML/CSSの解説サイトなどでも「同じ効果です」なんて紹介されてることもしばしば。

でもこの2つ、かなり性質が違います。
box-shadowは生成されるボックスの外周（普通は矩形、border-radiusなどで変形している場合もあり）にそって影が生成されます。
それに対し、drop-shadowの場合はそのボックスのうち「色が付いているところ」を基準にして影が生成されます。
その「色」の透明度も影に影響するというなかなか面白い動作になっています。

これ、言葉とかコードだけ見ても分かりにくいので効果を実感しやすいサンプルをjsdo.itで作ってみました。
是非動かして違いを見てみてください。

※ ブラウザの実装によると思いますがdrop-shadowではテキストを選択したマーカーにも影が付いたりしておもしろいですよ