drop-shadow 与 box-shadow 的核心区别在于：前者基于图像 alpha 通道生成贴合内容的阴影，后者仅投出矩形轮廓；drop-shadow 不支持 inset，适用于 png/svg 外发光，但兼容性较差，需 box-shadow 兜底。
drop-shadow 与 box-shadow 的核心区别
用 drop-shadow 给图片加投影，不是为了替代 box-shadow，而是因为它能真正「贴合图像内容」。当你给一张 PNG（带透明背景）或 SVG 图片加投影时，box-shadow 只会投出一个矩形轮廓，而 drop-shadow 会沿着图像 Alpha 通道的边缘生成阴影——这才是你想要的真实感。
常见错误是直接把 box-shadow 参数照搬过去，比如写成 filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) 却发现阴影还是方的：那说明你没关掉图片的默认外边框，或者图片本身被包裹在带背景的容器里，遮盖了 Alpha 边缘。
- 必须确保图片是独立渲染的（无父容器裁剪、无
overflow: hidden） - 避免用
img标签直接套用，优先改用background-image+div或直接用svg元素，控制更稳 -
drop-shadow不支持内阴影（inset），这点和box-shadow本质不同
给 PNG 图片加真实外发光效果
外发光本质是「高斯模糊 + 高不透明度的同色阴影」，但直接用 drop-shadow 模拟比套多层 text-shadow 更轻量、更可控。关键在颜色和模糊半径的配合。
比如让一张白色图标泛蓝光：filter: drop-shadow(0 0 12px #00aaff)。这里 0 0 表示无偏移，12px 是模糊半径，值太小（20px）会虚得失焦。颜色建议用纯色而非半透色，因为 drop-shadow 本身已含混合逻辑，再叠 rgba() 容易过曝。
- 若需多色发光（如科技感霓虹），可叠加多个
drop-shadow，用逗号分隔：filter: drop-shadow(0 0 8px #ff00aa) drop-shadow(0 0 16px #00aaff) - 不要对已带描边的图片重复加发光，边缘会双重模糊，显得脏
- 在 Retina 屏上，
drop-shadow的模糊表现比 CSSblur()更锐利，更适合 UI 图标
drop-shadow 在实际项目中的兼容性陷阱
drop-shadow 是 filter 函数之一，在 Chrome/Firefox/Safari（macOS/iOS）中支持良好，但在旧版 Edge（≤18）和部分安卓 WebView（尤其 Android 6–9）里完全不生效，且不会降级为 box-shadow——它就静默失效。
如果你的用户群仍包含企业内网环境（如 IE11/Edge Legacy），不能只靠 @supports (filter: drop-shadow()) 做检测，因为该语法本身在不支持环境中会解析失败，导致整个样式块被丢弃。
- 稳妥做法是双写：先写
box-shadow作兜底，再覆盖一层filter: drop-shadow() - 避免在关键路径（如按钮图标、加载状态）中单独依赖
drop-shadow，否则低版本用户看到的是无阴影的“断层”效果 - 动画中慎用：
filter触发重绘而非重排，但频繁改变drop-shadow参数（尤其是模糊值）在低端安卓机上可能掉帧
为什么不用 filter: blur() + mix-blend-mode 模拟发光
有人尝试用两层图叠加：底层高斯模糊 + 上层正片叠底，再调 mix-blend-mode 来造光晕。这条路理论上可行，但实际踩坑率极高——blur() 会把透明边缘拉出灰边，mix-blend-mode 在非隔离上下文中受父元素影响，结果不可控。
而 drop-shadow 内部做了 Alpha 预乘处理，天生规避了灰边问题。只要图片本身导出时 Alpha 边缘干净（无半像素抗锯齿污染），发光边缘就是干净的。
- 检查 PNG 是否带灰边：把图片放在深色背景上，看边缘是否有毛刺或浅灰过渡
- Sketch/Figma 导出时勾选「Trim transparent pixels」，PS 导出为 PNG-24 并关闭「Diffusion Dither」
- 如果必须用
blur()方案，务必给容器加isolation: isolate，否则混合模式会穿透到父层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
