currentColor 是当前元素 color 属性的计算值，严格按 CSS 层叠规则确定，可复用于 border-color、fill 等接受颜色的属性，未显式设置 color 时回退为浏览器默认黑色。
currentColor 不是一个固定颜色，而是当前元素的 color 计算值
currentColor 是 CSS 原生关键字，不是变量、函数或颜色常量。它代表的是「此刻该元素生效的 color 值」——这个值可能是你直接写的（如 color: #2563eb），也可能是从父元素继承来的，甚至可能是浏览器默认的 rgb(0, 0, 0)（当整条继承链都没设 color 时）。
关键在于：它不“猜”颜色，也不“就近找父级”，而是严格按 CSS 层叠规则计算出当前元素的 color，然后原样复用到其他支持颜色的属性上。
currentColor 怎么取值？看这三条继承规则
它的取值完全依赖 color 属性的层叠结果，而不是 DOM 结构或样式写法位置：
- 如果元素自身写了
color: red→currentColor就是red - 如果没写
color，但父元素有color: green且未被其他规则覆盖 →currentColor就是green - 如果整条继承链都未定义
color（包括:root），则回退为浏览器默认文本色，通常是rgb(0, 0, 0)（黑色）
注意：inherit 和 currentColor 完全不同：inherit 是强制从父元素拿某个属性的值；currentColor 永远只认“自己”的 color，哪怕这个 color 是继承来的。
立即学习“前端免费学习笔记（深入）”；
哪些地方能用 currentColor？别踩这些无效坑
currentColor 只能在接受 <color> 类型的 CSS 属性中使用，比如：
-
border-color、outline-color、box-shadow（颜色部分） -
fill和stroke（仅对内联 SVG 有效） -
text-shadow、background-color（但不能用于background-image: url()内）
常见失效场景：
- 父容器没设
color，子元素却直接用border-color: currentColor→ 边框变黑（不是 bug，是规范行为） - SVG 是通过
<img src="icon.svg">引入的 →currentColor在外部 SVG 文件里不生效（内联 SVG 才行） -
伪元素
::before里用了fill: currentColor，但宿主元素没设color→ 同样 fallback 到黑色
.btn {
color: #1e40af; /* 必须显式设置！ */
border: 2px solid currentColor;
box-shadow: 0 1px 3px currentColor;
}
.btn svg {
fill: currentColor; /* 内联 SVG 才能响应 */
}为什么有时改了 color，currentColor 却没变？
最常被忽略的一点：CSS 层叠优先级会覆盖继承。例如：
- 父元素设了
.theme-primary { color: #3b82f6; } - 子元素写了
.btn { color: inherit; }—— 看似继承，但若某条更高优先级规则（比如.btn:hover { color: unset; }）把color重置为unset，那currentColor就变成unset对应的计算值（通常是透明或默认黑）
所以，真正保险的做法是：在关键组件上显式声明 color，哪怕只是 color: inherit，也比完全不写更可控。
复杂点在于：它看起来像魔法，实则是严格按层叠规则走的“静态引用”。没设 color，就别指望 currentColor 会聪明地帮你兜底——它只会安静地返回那个你没意识到的默认值。
