currentColor 取当前元素自身最终计算出的 color 值，而非继承父级颜色；常见失效原因包括：元素自身 color 未被层叠计算、内联 SVG 颜色属性覆盖、SVG 通过 img 或 background-image 引入、UA 样式干扰、Shadow DOM 中 :host 未设 color，以及误用于非颜色属性。
currentColor 不是继承指令，它只读取“自己”的 color 计算值
很多人写 fill: currentColor 却发现图标没变色，第一反应是“父级 color 没传下来”，其实问题不在继承链断了，而在误解了 currentColor 的行为机制。它不从父元素“拿”颜色，而是取**当前元素自身最终计算出的 color 值**——哪怕这个值来自继承、变量、或浏览器默认，只要 CSS 层叠规则算出来，currentColor 就锁定它。
常见错误现象：
- 父元素设了
color: #3b82f6，子svg里写了fill: currentColor，但图标仍是黑色 - 组件封装后，在不同上下文中颜色失效，调试发现父容器根本没显式声明
color
关键判断点：
- 检查目标元素自身是否参与了
color的层叠：用浏览器 DevTools 查看 computed 样式里的color值，不是看 styles 面板里有没有写，而是看 computed 值是不是你预期的那个 - 如果 computed
color是rgb(0, 0, 0)（黑），说明整条链都没设color，currentColor就只能取这个回退值，不是“没继承”，是“没源头”
内联 SVG 中 fill/stroke 被硬编码覆盖
currentColor 在 SVG 里失效，90% 是因为 SVG 源码自带内联颜色声明，比如导出工具自动加的 fill="#000" 或 stroke="red"。这些属性优先级高于外部 CSS，直接把 fill: currentColor 给压死了。
立即学习“前端免费学习笔记（深入）”；
必须手动清理：
- 删掉所有
<path>、<circle>等子元素上的fill、stroke、style="fill: ..."属性 -
<svg>根标签也别写fill或color—— 它默认继承，显式写反而干扰 - 确认没有通过
background-image: url(icon.svg)或<img src="icon.svg">引入 SVG，这两种方式完全隔离上下文，currentColor无效
表单控件、链接等 UA 样式干扰 color 计算
按钮、输入框、链接等原生元素有强 UA 默认样式，它们的 color 值往往不是继承来的，而是浏览器内置的（如 Chrome 的 button 默认 color: buttontext）。这时即使你写了 border-color: currentColor，实际取到的是系统主题色，不是你期望的文本主题色。
解决办法不是硬覆盖 UA 样式，而是主动打通 color 链：
- 对
a元素，要同时设置：a:link、a:visited、a:hover、a:active的color，否则伪类会回退到 UA 值 - 对
button、input[type="button"]、select，显式写color: inherit或更稳妥的color: currentColor，并确保其父容器已设color - 在 Shadow DOM 场景中，
:host必须显式设color，内部::slotted(*)才能用currentColor正确透传
currentColor 不能用于非颜色属性或自定义属性赋值
它只在 CSS 中接受 <color> 类型的属性里有效，比如 border-color、fill、stroke、box-shadow。以下写法全部无效：
-
font-size: currentColor—— 语法错误，被忽略 -
--my-color: currentColor—— 自定义属性不支持关键字，声明被丢弃 -
background-color: currentColor—— 大部分现代浏览器支持，但 IE11 和旧版 Safari 不支持，静默失效
容易被忽略的一点是：currentColor 本身不含 alpha 通道。如果父元素 color 是 rgba(0,0,0,0.5)，那么 border-color: currentColor 也会带透明度，边框可能比预期更淡——这不是 bug，是它忠实反映计算值的表现。
