CSSでは影を付ける時、長い間box-sizingが用いられてきました。

しかし、最近、filterをほとんどのブラウザがサポートするようになったため、影にもfilter: drop-shadowという選択肢が登場しました。
こいつ超優秀です。

box-shadowでは四角い影しか付けられない

まず、下記サンプルを見てください。

See the Pen Untitled by Uilou (@uilou754) on CodePen.

もうわかると思いますが、同じように影を付けるCSSでも、以下のような違いがあります。

• box-shadowでは、要素の形に対して影が描画されます。
• filter: drop-shadowでは、要素内の色がある部分に対して影が描画されます。

このため、filter: drop-shadowの方がより複雑な形状の影を付けることが可能です。

filter: drop-shadowでは複雑な影が付けられる

filter: drop-shadowでは色のある部分に影を付けるため、透明色のあるpngなどを使用すると、より複雑な影を付けることが可能になります。

filter: drop-shadowを使った場合、Safariで影が途切れたり、おかしくなる

便利なfilter: drop-shadowですが、Safariでは表示がおかしくなることがあります。（Internet Explorerは見限っているので動作確認すらしていない）
現象としては、影が途中で切れる、砂嵐のようになるなど

Safariでおかしくなる原因は、filterだけではハードウェアアクセラレーションが動かないらしく、filter系の処理がおかしくなるそうです。
Safariでは一手間加えて明示的に動かしてやらないといけないようです。

対応方法としては以下のように、transformを入れることでハードウェアアクセラレーションが重い腰を上げてくれるようです。

.shadow {
    filter: drop-shadow(5px 5px 3px gray);
    transform: translateZ(0px); /* ハードウェアアクセラレーションに仕事させるためだけの記述 */
}