currentcolor 是关键字而非变量，其生效需满足元素有生效的 color 值且图标属性（如 fill）显式设为 currentcolor；内联 svg 失效主因是残留硬编码颜色； 需根透传；border/box-shadow/text-decoration-color 存在兼容陷阱；字体图标天然继承 color， 等外部引入 svg 不支持 currentcolor。
直接结论：currentColor 不是变量，是关键字；它能统一图标与文本颜色，但必须满足两个硬性条件——元素自身有生效的 color 值，且图标的着色属性（如 fill 或 color）被显式设为 currentColor。
内联 SVG 的 fill="currentColor" 为什么常失效
写对了语法却没变色，90% 是因为 SVG 源码里残留了硬编码颜色声明。这些内联属性优先级高于 CSS，会静默覆盖 currentColor 行为。
- 逐个检查
<svg></svg>根标签和所有子元素（<path></path>、<circle></circle>等），删掉所有fill、stroke、style属性 - 别在
<svg></svg>上写color: inherit或fill: #333—— 它本就默认继承，显式写反而干扰层叠 - 用 DevTools 查看目标元素的
computed color，确认不是transparent或rgba(0,0,0,0) -
<use href="#icon"></use>渲染出的内容不在当前样式作用域内，纯 CSS 选不到；必须靠<svg fill="currentColor"><use href="#icon"></use></svg>这种根透传方式
border-color: currentColor 和 box-shadow: ... currentColor 的兼容陷阱
这两个用法很常用，但旧版 Safari（尤其是 15.4 之前）对 box-shadow 中的 currentColor 支持不稳，text-decoration-color 更是完全不支持。
-
border: 1px solid currentColor在 IE11 会整条失效；必须拆成border-width、border-style、border-color单独声明 -
box-shadow: 0 0 4px currentColor必须提供降级：box-shadow: 0 0 4px #666;再覆盖一层box-shadow: 0 0 4px currentColor; -
text-decoration-color: currentColor在 Safari 15.4 之前无效，且无法通过text-decoration复合属性设置，只能单独声明并配 fallback -
currentColor不参与transition—— 给color加了transition，边框/阴影只会“跳变”，不会平滑过渡
字体图标和 <img src="icon.svg"> 根本不认 currentColor
字体图标本质是文字，它天然继承 color，所以 color: currentColor 是多余操作；而 <img> 加载的 SVG 是独立文档上下文，currentColor 连解析机会都没有。
- 字体图标只需控制父容器的
color，比如button { color: var(--text-primary); }，图标自然跟着变 - 某些 iconfont 库默认设了
color: inherit，此时你改父级color就够了 -
<img src="icon.svg">、background-image: url(icon.svg)、<object></object>、<iframe></iframe>全部不支持currentColor，一律回退为黑色 - 唯一可靠方式只有两种：
<svg></svg>内联写死在 HTML 中；或用<use href="#id"></use>引用页面内已定义的<symbol></symbol>，且该<symbol></symbol>内部也清空了所有硬编码颜色
最易被忽略的一点：currentColor 取的是本元素自身最终计算出的 color 值，不是父级的。哪怕这个值来自 color: transparent，图标也会变成透明——看着像“消失”，其实是按规则走通了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
