在前端網頁切版中，當我們想替一張已經去背的透明 PNG 圖片、不規則形狀的 Logo 或 SVG 圖示加上立體陰影時，若習慣性地寫下 box-shadow，會發現圖片外圍竟然長出一個難看的矩形方框陰影，完全無視透明背景！
要讓陰影完美貼合去背圖片的不規則輪廓，必須改用 CSS 濾鏡中的 filter: drop-shadow()。本文直接透過視覺圖解比較 drop-shadow 與 box-shadow 的核心差別，並整理實用的切版場景範例。
快速複製與章節跳轉：
- ⚡ 直接複製透明圖片輪廓陰影語法 ➔ 1.
filter: drop-shadow()標準語法與視覺對比- 📊 兩者規格差在哪？ ➔ 2.
filter: drop-shadow()與box-shadow差異比較表- 💬 進階技巧：對話框連同三角形尖角一起加陰影 ➔ 3. 實務場景：氣泡對話框（含三角形尖角）連貫陰影
- 🧭 想看更多圖片濾鏡（模糊／灰階／壓暗）？ ➔ 參閱 CSS Filter 濾鏡效果教學：blur 模糊、grayscale 灰階與 10 種屬性圖解
1. filter: drop-shadow() 標準語法與視覺對比
drop-shadow() 是隸屬於 filter 屬性底下的濾鏡函式，專門用來讀取元素內容的 Alpha 透明通道，只針對「非透明像素的真實邊緣」投射陰影：
/* 錯誤做法：對去背 PNG/SVG 使用 box-shadow，外圍會出現矩形方框 */
.transparent-logo-wrong {
box-shadow: 8px 10px 16px rgba(0, 0, 0, 0.45);
}
/* 建議做法：使用 filter: drop-shadow(水平位移 垂直位移 模糊程度 陰影顏色) */
/* 第 3 個長度是高斯模糊的標準差（standard deviation），數值越大陰影越大越模糊 */
.transparent-logo-correct {
filter: drop-shadow(8px 10px 10px rgba(0, 0, 0, 0.48));
}去背透明圖示陰影效果對照圖（box-shadow vs drop-shadow）
圖：左側對透明背景圖示使用 box-shadow 會在四周產生矩形方框；右側使用 filter: drop-shadow() 則能穿透透明格線，完美貼合星形輪廓。
2. filter: drop-shadow() 與 box-shadow 差異比較表
雖然兩者的參數看起來幾乎一樣，但它們支援的參數數量與底層渲染機制有以下 4 個關鍵差異：
| 比較項目 | box-shadow（盒模型陰影） | filter: drop-shadow()（濾鏡輪廓陰影） |
|---|---|---|
| 陰影偵測範圍 | 永遠針對元素的矩形外框（Box Model）投射陰影 | 穿透透明區域，針對非透明像素的真實形狀輪廓投射陰影 |
| 參數格式 | 支援 5 個參數：X位移 Y位移 模糊 擴散半徑(spread) 顏色 | 僅支援 4 個參數：X位移 Y位移 模糊 顏色（不支援第 4 個數值 spread 擴散半徑，若誤填 4 個數字會直接失效！） |
內陰影（inset） | 支援 box-shadow: inset ... 製作凹陷內陰影 | 不支援 inset 內陰影 |
| 多重陰影疊加方式 | 用逗號分隔：box-shadow: 0 2px 4px #000, 0 8px 16px #000; | 用空白串接多個函式：filter: drop-shadow(...) drop-shadow(...); |
踩坑注意：許多工程師把
box-shadow: 0px 4px 10px 2px rgba(0,0,0,0.3);直接複製貼進drop-shadow(0px 4px 10px 2px rgba(0,0,0,0.3))，結果發現陰影完全消失！原因是drop-shadow不接受第 4 個2px（擴散半徑spread-radius）參數，移除第 4 個長度數值即可正常顯示。
3. 實務場景：氣泡對話框（含三角形尖角）連貫陰影
在切版 Tooltip 提示框或聊天的「氣泡對話框」時，我們常會在矩形 div 上搭配 ::after 偽元素畫出一個小三角形尖角（關於偽元素用法，可參考 CSS ::before 與 ::after 偽元素用法：content 屬性、圖片大小與無效原因）。
這時如果對父容器使用 box-shadow，陰影只會出現在矩形方框上，底下的三角形尖角完全沒有陰影，看起來像直接貼在矩形陰影上；但只要改用 filter: drop-shadow()，瀏覽器就會把「矩形主體 + 偽元素三角形」視為同一個不透明輪廓，繪製出完美連貫的整體陰影！
.speech-bubble {
position: relative;
background: #ffffff;
padding: 18px 22px;
border-radius: 12px;
/* 關鍵：使用 drop-shadow 讓主框與 ::after 三角形尖角共用連貫陰影 */
filter: drop-shadow(8px 12px 6px rgba(15, 23, 42, 0.45));
}
.speech-bubble::after {
content: "";
position: absolute;
bottom: -16px;
left: 55px;
border-width: 16px 16px 0;
border-style: solid;
border-color: #ffffff transparent transparent;
}氣泡對話框與三角形尖角陰影效果對照圖
圖：左側 box-shadow 的陰影只畫在矩形主框，不包含 ::after 三角形尖角；右側 filter: drop-shadow() 將主框與尖角視為一體投射連貫陰影。
發佈留言