簡單的說就是如果圖片是不規則的透明背景 .png 檔，想要順著圖形的形狀產生陰影，就要使用 drop-shdow
而 box-shadow 則是只能產生方形的陰影，也就是整張圖片包含背景的範圍。
要注意的是 drop-shadow 要用 filter 來定義
像這樣
filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
效果如下：
如果是用
box-shadow: 2px 2px 7px 3px rgba(0, 0, 0, 0.5);
效果如下：
更多細節：
box-shadow可以設定5個參數
例如：
box-shadow: 2px 2px 7px 5px rgba(0, 0, 0, 0.5);
由前到後分別代表
- horizontal-offset: 陰影的水平偏移量。(2px)
- vertical-offset: 陰影的垂直偏移量。(2px)
- blur-radius: 陰影的模糊半徑。值越大，陰影越模糊。(7px)
- spread-radius: 這是控制陰影擴展的大小。正值會使陰影增大，負值會使陰影縮小。(5px)
- color: 陰影的顏色。rgba(0, 0, 0, 0.5)
drop-shadow 也類似，但須注意的是，drop-shadow 沒有 spread-radius(第4點)，要是設定了整個陰影效果會出不來。
內陰影
如果想讓陰影在範圍內，可以用 inset 來創造一種凹陷效果
(drop-shadow 無法使用 inset)
inset 的使用範例：
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
外陰影+內陰影
box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.6), inset 0 2px 5px rgba(0, 0, 0, 0.5);