currentColor 是 CSS 关键字，代表当前元素 color 的计算值；它使图标颜色（如 fill、stroke）自动同步文字颜色，无需 JS，但仅对内联 SVG 有效且需清除硬编码 fill 属性。
currentColor 是什么，它为什么能自动同步颜色
currentColor 是一个 CSS 关键字，代表当前元素的 color 计算值。它不是继承值，而是“取当前元素自己的 color 值”，哪怕这个值是继承来的——只要计算完成，currentColor 就锁定那个值。这意味着：只要图标的颜色属性（比如 fill、stroke 或 background-color）设为 currentColor，它就会实时响应文字颜色变化，无需 JS 或重复声明。
常见误区是以为它“继承 color”，其实它更像一个动态变量：父元素设了 color: #3498db，子元素用 fill: currentColor，哪怕子元素没显式设 color，它的 currentColor 仍等于 #3498db（因为继承后计算值就是那个值）。
SVG 图标中用 fill: currentColor 最可靠
内联 SVG（非 <img> 引入）才能直接控制 fill。外部 SVG 或雪碧图不支持该关键字生效。
- 必须把 SVG 写在 HTML 里（或通过
<svg>...</svg>内联），不能用<img src="icon.svg"> - 确保图标路径（
<path>、<circle>等）没有硬编码fill属性，否则会覆盖 CSS 设置 - 推荐写法：
.icon { fill: currentColor; }，然后给 SVG 元素加class="icon" - 如果 SVG 有多个形状，统一用
.icon > * { fill: currentColor; }更稳妥
伪元素图标（::before/::after）也能用 currentColor
用 Unicode 字符或字体图标时，currentColor 同样适用，但要注意载体差异：
立即学习“前端免费学习笔记（深入）”；
- 字体图标（如 Font Awesome）：设置
font-family后，color直接控制图标色，无需额外设fill - Unicode 符号（如
content: "★"）：直接靠color渲染，currentColor不需显式写，因为本就继承 - 纯 CSS 绘制图标（如用
border+transform画箭头）：所有颜色相关属性（border-color、background-color）都可设为currentColor
容易踩的坑：currentColor 不生效的典型场景
不是所有地方都能用 currentColor，它只在支持颜色值的 CSS 属性上有效，且受盒模型和渲染上下文限制：
-
background-image: linear-gradient(...)里不能直接写currentColor—— CSS 渐变函数不解析该关键字，得用自定义属性中转 - SVG 中若用了
use引用<symbol>，currentColor在<use>元素上设才生效，不能只设在<symbol>里 - 设置了
opacity: 0.5的父容器，子元素的currentColor会带透明度，但fill不会自动叠加透明；实际表现可能比预期更淡 - 某些旧版 Safari 对
currentColor在 SVG filter 或 mask 中的支持不稳定，测试时需验证
最常被忽略的是 SVG 内联时残留的 fill="black" 属性——它优先级高于 CSS，必须删掉或用 !important 覆盖，否则 currentColor 完全不触发。
