drop-shadow在png上出黑边的根本原因是浏览器对alpha通道边缘的保守采样，尤其safari和旧版chrome将半透明像素误判为硬边界裁剪，导致阴影光晕被截断而露出底层黑色背景；实测blur-radius设6px～10px最稳，需避开奇数、禁用transparent背景（改用rgba(0,0,0,0.001)）、关闭backface-visibility: hidden，并确保导出时关闭web优化与仿色。
为什么drop-shadow在PNG上会出黑边
黑边不是图片导出问题，而是filter: drop-shadow()在合成阶段对Alpha通道边缘做保守采样导致的——浏览器（尤其是Safari和旧版Chrome）把半透明像素当硬边界裁剪，阴影光晕被截断后露出底层渲染背景（通常是黑色或深灰）。这不是PNG质量差，也不是CSS写错了，是滤镜作用于“绘制上下文”时丢失了亚像素信息。
blur-radius设多少才不露黑边
盲目调大blur-radius反而会让主体发虚。实测在Retina屏下最稳的区间是6px～10px；若原图导出时已带羽化（如Photoshop勾选“消除锯齿”），4px就够用。关键要避开奇数，比如5px、7px，某些Android WebView会因亚像素对齐失败直接加剧毛边。
- 宽高200px的图，优先试
drop-shadow(0 0 8px #000) - 小图标（24×24）用
3px或4px，别硬套比例 - 颜色别用
rgba(0,0,0,0.3)，改用纯黑#000再靠模糊半径控强度
Safari下transparent背景必须绕开
Safari对transparent或rgba(0,0,0,0)不触发完整Alpha合成路径，drop-shadow()只画在矩形框上，自然漏黑边。解决方法是给图片容器加一层极浅背景：background-color: rgba(0,0,0,0.001)——这是2026年5月实测在Safari 16–17稳定生效的最小alpha值。
- 确保
<img>自身没background、border，否则滤镜绑定到容器框而非图像像素 - 禁用
backface-visibility: hidden和transform: translateZ(0)，它们会切断Alpha通道传递 - 别用
overflow: hidden包裹，会裁掉阴影扩散区域
导出PNG时真正该关的三个选项
前端调参只是补救，源头优化更省力。用Photoshop或Figma导出时，盯住这三项：
- 关闭“Web格式优化”（它会压缩Alpha通道，让边缘变硬）
- 关闭“仿色”（dithering），开启后半透明过渡会生成噪点，
drop-shadow采样更易崩 - 导出尺寸必须是整数倍缩放（比如原图100×100，就别导83×83再用CSS拉伸）
黑边问题从来不是单点故障，从导出设置、容器背景、层叠上下文到浏览器实现，任一环节断开，drop-shadow就会降级成box-shadow——看着像修好了，其实只是光晕被裁掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
