drop-shadow 作用于元素 alpha 通道轮廓，贴合实际像素边界；box-shadow 仅围绕矩形盒模型投射阴影。前者适用于透明 png、svg、clip-path 裁切等非矩形图形，后者始终为方形。
drop-shadow 和 box-shadow 的本质区别在哪
drop-shadow 是 CSS filter 函数，它作用于元素的**Alpha通道轮廓**——也就是图像、SVG 或透明 PNG 的实际像素边界；而 box-shadow 只围绕元素的矩形盒模型（border-box）投射阴影。这意味着：只要你的元素有透明区域或非矩形视觉形状（比如剪切路径、SVG path、带 alpha 的 PNG），drop-shadow 就能贴合真实外形，box-shadow 则永远是方的。
常见误用场景：给 <img src="logo.png"> 加 box-shadow，结果白底+阴影一起框住；换成 filter: drop-shadow(2px 2px 4px #000)，阴影就只从 logo 图形边缘延展。
哪些元素能真正触发 drop-shadow 的“贴合”效果
不是所有 HTML 元素加了 drop-shadow 都会贴合——它依赖底层渲染是否暴露 Alpha 通道：
-
<img> 加载透明 PNG / WebP / SVG 图片时 ✅
-
<svg></svg> 内部图形（<path></path>、<circle></circle> 等）✅
- 用
clip-path 或 mask-image 裁切后的元素 ✅（但需注意浏览器兼容性）
- 纯色
<div> 即使设了 <code>border-radius: 50% ❌ —— 它仍是矩形盒，drop-shadow 效果和 box-shadow 几乎一致
验证方法：打开 DevTools → Elements 面板 → 查看该元素是否在渲染层中生成了独立的 Alpha 图层（通常出现在 “Layers” 面板里）。
drop-shadow 参数调优的关键点
drop-shadow() 接收三个参数：drop-shadow(<offset-x><offset-y><blur-radius><color>)</color></blur-radius></offset-y></offset-x>，但要注意：
-
<blur-radius></blur-radius> 过大会导致边缘“膨胀”，尤其对细线条图标（如 SVG icon）容易糊掉轮廓 —— 建议从 2px 起步，不超过 6px
- 不支持
inset，无法内阴影
- 颜色支持 rgba/hsl/hex，但半透明色（如
rgba(0,0,0,0.3)）会让阴影叠加变淡，适合多层 filter 场景
- 多个
drop-shadow 可叠加，例如 filter: drop-shadow(1px 1px 2px #000) drop-shadow(2px 2px 4px rgba(0,0,0,0.2)) 模拟更自然的光影层次
img.logo {
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
IE 和旧版 Safari 的兼容性陷阱
drop-shadow 在 IE 完全不支持；Safari ≤ 13.1 对 SVG 内部 filter 支持不稳定（尤其嵌套 <g></g> 或 transform 后）；Android WebView ≤ 4.4 会忽略 Alpha 边缘。
稳妥方案：
- 对关键视觉元素（如品牌 logo），准备 fallback：
box-shadow + 注释说明“仅用于旧浏览器”
- 用
@supports (filter: drop-shadow()) 包裹，避免干扰其他样式
- 避免在
position: fixed 或 transform: scale() 元素上直接使用 —— 部分 Safari 版本会错位或失效
贴合阴影不是“加个 filter 就完事”，它依赖图形数据本身是否携带有效 Alpha 信息，也受限于浏览器如何合成图层。调试时先确认图片/图形格式和渲染上下文，再调参。
<img> 加载透明 PNG / WebP / SVG 图片时 ✅<svg></svg> 内部图形（<path></path>、<circle></circle> 等）✅clip-path 或 mask-image 裁切后的元素 ✅（但需注意浏览器兼容性）<div> 即使设了 <code>border-radius: 50% ❌ —— 它仍是矩形盒，drop-shadow 效果和 box-shadow 几乎一致
验证方法：打开 DevTools → Elements 面板 → 查看该元素是否在渲染层中生成了独立的 Alpha 图层（通常出现在 “Layers” 面板里）。
drop-shadow 参数调优的关键点
drop-shadow() 接收三个参数：drop-shadow(<offset-x><offset-y><blur-radius><color>)</color></blur-radius></offset-y></offset-x>，但要注意：
-
<blur-radius></blur-radius> 过大会导致边缘“膨胀”，尤其对细线条图标（如 SVG icon）容易糊掉轮廓 —— 建议从 2px 起步，不超过 6px
- 不支持
inset，无法内阴影
- 颜色支持 rgba/hsl/hex，但半透明色（如
rgba(0,0,0,0.3)）会让阴影叠加变淡，适合多层 filter 场景
- 多个
drop-shadow 可叠加，例如 filter: drop-shadow(1px 1px 2px #000) drop-shadow(2px 2px 4px rgba(0,0,0,0.2)) 模拟更自然的光影层次
img.logo {
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
IE 和旧版 Safari 的兼容性陷阱
drop-shadow 在 IE 完全不支持；Safari ≤ 13.1 对 SVG 内部 filter 支持不稳定（尤其嵌套 <g></g> 或 transform 后）；Android WebView ≤ 4.4 会忽略 Alpha 边缘。
<blur-radius></blur-radius> 过大会导致边缘“膨胀”，尤其对细线条图标（如 SVG icon）容易糊掉轮廓 —— 建议从 2px 起步，不超过 6px
inset，无法内阴影rgba(0,0,0,0.3)）会让阴影叠加变淡，适合多层 filter 场景drop-shadow 可叠加，例如 filter: drop-shadow(1px 1px 2px #000) drop-shadow(2px 2px 4px rgba(0,0,0,0.2)) 模拟更自然的光影层次drop-shadow 在 IE 完全不支持；Safari ≤ 13.1 对 SVG 内部 filter 支持不稳定（尤其嵌套 <g></g> 或 transform 后）；Android WebView ≤ 4.4 会忽略 Alpha 边缘。
稳妥方案：
- 对关键视觉元素（如品牌 logo），准备 fallback：
box-shadow+ 注释说明“仅用于旧浏览器” - 用
@supports (filter: drop-shadow())包裹，避免干扰其他样式 - 避免在
position: fixed或transform: scale()元素上直接使用 —— 部分 Safari 版本会错位或失效
贴合阴影不是“加个 filter 就完事”，它依赖图形数据本身是否携带有效 Alpha 信息，也受限于浏览器如何合成图层。调试时先确认图片/图形格式和渲染上下文，再调参。
