drop-shadow不能给单色图标换色，它仅生成带模糊/偏移的阴影；真换色应优先用currentcolor方案，其次考虑hue-rotate+sepia等组合滤镜，png则需mask-image配合background-color。
drop-shadow 能不能给单色图标换色
不能直接换色，drop-shadow 本质是描边+模糊，不是着色工具。它常被误用成“换色方案”，结果只在图标边缘糊出一圈色边，主体还是原色。
适用场景仅限：需要带模糊/偏移的阴影效果（比如按钮悬停时图标投个柔和投影），且图标本身是纯黑或纯白、背景为单色时，才可能视觉上“近似换色”。
- 错误现象：
filter: drop-shadow(0 0 0 #ff6b6b)对 SVG 图标没反应？因为没设置fill或stroke为currentColor，滤镜不作用于颜色值本身 - 参数陷阱：
drop-shadow(h v blur color)中的blur设为0时，等价于硬边描边；设太大则边缘发虚，看不出图标轮廓 - 兼容性：Chrome/Firefox/Edge 支持良好，但 Safari 对 inline SVG 的
drop-shadow渲染偶有偏移，需加transform: translateZ(0)触发硬件加速
hue-rotate 是真换色，但只适合灰度图
hue-rotate 会旋转整个颜色空间的色相角，对非灰度图（比如带饱和色的 PNG）会产生不可控的偏色，完全失真。它真正靠谱的使用前提是：图标必须是纯灰阶（#000 / #333 / #fff 等）。
原理很简单：灰阶色的饱和度为 0，hue-rotate 不改变亮度和明度，只“绕着色轮转”，转完还是灰阶——等等，那怎么变色？关键在叠加一层 invert() 或用 contrast() 拉高饱和度，但更稳的方式是配合 sepia() 和 brightness() 组合调色。
- 典型组合：
filter: hue-rotate(180deg) sepia(1) saturate(4) brightness(1.2)—— 把黑图标转成偏青蓝的亮色，比单用hue-rotate可控得多 - 性能影响：多层 filter 会触发重绘，尤其在滚动容器里频繁变化时，建议用
will-change: filter提前声明（但别滥用） - 注意边界：SVG 如果用了
fill="none"或透明区域，hue-rotate会把透明通道也搅乱，导致背景透出异常
最稳的换色法：CSS 自定义属性 + currentColor
别折腾滤镜了，真正的单色图标换色，靠的是让图标“主动认领文字颜色”。SVG 内联写法中把 fill 和 stroke 设为 currentColor，再用 CSS 控制父元素或自身 color，就能一键换色。
这是唯一能精准控制、无副作用、兼容性拉满（IE9+）的方案，也是设计系统里图标组件的标准做法。
- SVG 示例：
<svg viewbox="0 0 24 24" width="24" height="24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z" fill="currentColor"></path></svg>
- 调用方式：
.icon { color: #2563eb; }或<span class="icon" style="color: #dc2626;"></span> - 容易踩的坑：外部引用的 SVG（
<img src="icon.svg">）无法继承 CSS，必须改用 inline SVG 或<use></use>引用 sprite，否则currentColor不生效
遇到 PNG 图标怎么办
PNG 没法改 fill，滤镜又难控，最直接的办法是用 background-image 配合 mask-image：把 PNG 当蒙版，用纯色层透过它显示。
核心是两步：先用 mask-image: url(...) 定义形状，再用 background-color 填充颜色。这样 PNG 只负责“镂空”，颜色由 CSS 全权控制。
- 示例：
.icon-png {<br> width: 24px;<br> height: 24px;<br> background-color: #8b5cf6;<br> -webkit-mask-image: url(icon.png);<br> mask-image: url(icon.png);<br> -webkit-mask-repeat: no-repeat;<br> mask-repeat: no-repeat;<br>} - 兼容性注意：Firefox 直到 99 版才支持
mask-image的 URL 值，旧版本需降级为mask简写或改用 SVG Sprite - 性能提示：每个 PNG mask 都会触发一次图像解码，大量图标时建议雪碧图或转成内联 data URL
真正麻烦的从来不是换色本身，而是图标资源的交付格式——选错格式，后面所有滤镜、变量、mask 都得兜底补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
