drop-shadow 不能真正换色，只是用位移+零模糊阴影遮盖原图实现视觉错觉；需纯色图标、单色背景、blur=0、位移值等于图标宽，且不兼容IE、Safari易偏移、PNG/SVG表现不同，维护成本高。
drop-shadow 不能真正给纯色图标“换色”，它只是描边+模糊，不是着色工具。你看到的“变色效果”其实是视觉错觉，靠的是位移+阴影叠加遮盖原图，本质是障眼法。
为什么 drop-shadow 看起来像在换色？
常见写法如 filter: drop-shadow(64px 0 0 #ff6b6b)，配合 transform: translateX(-64px)，把阴影“拖”到图标原始位置，盖住原图。原图被藏在阴影后面，人眼只看到色块——但这不是图标本身变色，而是用阴影伪造了一个新图层。
- 图标必须是纯黑或纯白，且背景为单色（否则阴影边缘会漏底）
-
blur值必须为0，否则边缘发虚、轮廓模糊 - 位移值（如
64px）必须严格等于图标宽度，否则对不齐、出现白边或重叠 - Safari 对 inline SVG 的
drop-shadow渲染偶有偏移，需加transform: translateZ(0)强制硬件加速
drop-shadow 在 PNG 和 SVG 上表现完全不同
对 <img src="icon.png">：能勉强用，前提是 PNG 是纯黑/白无透明通道；一旦带 alpha 或灰阶过渡，阴影会透出背景，颜色失控。
对 inline SVG：drop-shadow 不作用于 fill 或 stroke 值本身，只对最终渲染像素生效。如果 SVG 里写了 fill="#000"，那 drop-shadow 就只是在它外面画一圈红边——除非你先用 transform 把它“移走”，再让阴影补位。
- SVG 内联时若用了
fill="currentColor"，drop-shadow依然不会响应 color 变化，它不读取 CSS 变量 - PNG 图标用
drop-shadow换色后，无法响应:hover或主题切换，所有颜色都要手写不同 filter 值 - IE 完全不支持
drop-shadow，连 fallback 都难做
哪些场景下可以凑合用 drop-shadow？
仅限以下条件同时满足时：
立即学习“前端免费学习笔记（深入）”；
- 图标来源固定、尺寸统一（比如全部 24×24 PNG）
- 只需支持 Chrome/Firefox/Edge，明确放弃 IE 和旧 Safari
- 不需要暗色模式适配、也不需要动画过渡（
transition: filter在多层 drop-shadow 下卡顿明显） - 设计允许“硬边色块”，不要求精确色彩还原（
drop-shadow(0 0 0 #4285f4)出来的蓝往往偏浅、发灰）
示例代码（PNG 图标）：
.icon-wrapper {
width: 24px;
height: 24px;
overflow: hidden;
}
.icon-wrapper img {
width: 100%;
height: 100%;
transform: translateX(-24px);
filter: drop-shadow(24px 0 0 #4285f4);
}
真正容易踩的坑
最常被忽略的一点：你调了半天 drop-shadow 参数，却没检查图标本身的导出质量。
- Sketch/Figma 导出 PNG 时勾了“抗锯齿”，边缘带半透明灰阶 →
drop-shadow会把这层灰也描一遍，导致色块边缘发毛 - SVG 中存在
fill="none"的路径，或opacity小于 1 → 阴影会透出父容器背景，颜色混杂 - 用 Webpack/Vite 打包时，
url()引入的 SVG 被自动转成 base64 → 浏览器可能不识别其内部结构，drop-shadow行为异常
如果你的图标要上生产环境、要适配深色模式、要支持高对比度访问，别碰 drop-shadow 换色——直接切到 currentColor 或 mask-image 方案。它省下的那几行 CSS，后期维护成本翻十倍。
