drop-shadow基于元素实际像素轮廓生成阴影，box-shadow围绕矩形盒模型投射阴影；前者适配不规则形状、透明png和圆角，后者支持内阴影、扩展半径及多层叠加，且性能更优。
filter: drop-shadow 和 box-shadow 看起来参数相似，但底层机制完全不同：前者是基于元素**实际像素轮廓**生成阴影，后者是围绕**矩形盒模型**投射阴影。选错一个，不规则形状、透明 PNG、border-radius 或 clip-path 元素的阴影就会“糊成一块”或“完全不对形”。
drop-shadow 能识别真实形状，box-shadow 只认矩形盒子
当你给一个带 border-radius: 50% 的圆形 div 或一张带透明背景的 PNG 图标加阴影时：
-
box-shadow仍按原始矩形边界画影子——圆角变方影，透明区域也被“填满”成实心影 -
filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.3))会逐像素扫描非全透明区域，只在可见内容边缘生成阴影，圆就是圆，锯齿就是锯齿，镂空部分无影
这在图标系统、对话气泡、SVG 组件中是决定性差异。
box-shadow 支持内阴影和扩展半径，drop-shadow 不支持
box-shadow 的完整语法含两个关键能力，drop-shadow 完全缺失：
-
inset：例如box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)实现内凹效果，drop-shadow无法做到 -
spread-radius：控制阴影整体缩放，如box-shadow: 0 0 6px 4px #eee让浅灰阴影“撑开”一圈，常用于模拟浮层厚度；drop-shadow只有模糊，没有“撑”
若需内阴影或精确控制阴影尺寸，box-shadow 是唯一选择。
多阴影叠加与浏览器兼容性现实
box-shadow 支持逗号分隔的多层阴影，比如模拟立体文字或复杂光效：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15)；drop-shadow 只接受单组参数，无法叠加。
兼容性上：box-shadow 自 IE9 起全平台稳定支持；filter: drop-shadow 在 Safari 和 Chrome 中已稳定，但旧版 Android WebView（≤4.4）和部分 Electron 内嵌环境仍可能 fallback 失败——上线前务必用真实设备验证 PNG 图标阴影是否可见。
性能与渲染链路差异
box-shadow 是合成层（compositing layer）优化过的属性，GPU 加速成熟，大量卡片列表滚动时几乎无负担；drop-shadow 属于 filter 滤镜管线，需对整个元素做像素级处理，尤其当元素尺寸大、模糊值高（如 blur-radius > 20px）或含复杂子树时，可能触发重绘卡顿。
实践中：图标、小尺寸 SVG 用 drop-shadow 更自然；卡片、容器类元素优先用 box-shadow；二者混用时注意不要让 filter 触发整个父容器重绘（避免在父级上写 filter，而应直接作用于目标图片或 SVG 元素）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
