currentcolor取当前元素color的计算值而非父级声明值，支持border-color、fill等属性，不支持background-color和color自身，ie11等旧浏览器需fallback，无性能负担但不响应color动画。
color: inherit 只读声明值，不响应变量或UA样式变化
inherit 是通用继承关键字，它把父元素 color 的「声明值」原样拿过来——如果父元素写的是 color: var(--primary)，子元素 color: inherit 拿到的不是变量展开后的颜色，而是字面量 var(--primary)，这在大多数浏览器中会退为 initial（通常是黑色），导致断链。更常见的是：父元素没显式设 color，只靠浏览器 UA 样式（如 a 默认蓝色），此时 inherit 无法穿透 UA 规则优先级，实际继承失败。
容易踩的坑包括：
- 只给
a写color: inherit，漏掉a:link/a:hover等伪类，结果悬停时颜色突变回蓝色 - 在 Shadow DOM 中用
inherit试图透传颜色，完全无效——它跨不过 shadow boundary -
--my-color: inherit是非法写法，自定义属性不接受inherit关键字
currentColor 取的是“我自己的 color 计算值”，不是“父级的 color”
currentColor 不是继承机制，而是一个动态别名：它永远等于当前元素 color 属性的**计算值**（computed value）。这个值可能来自自身声明、inherit、initial 或变量展开后的结果。关键点在于：它是“本元素最终生效的 color”，不是“从哪来的”。
这意味着：
- 即使父元素用
color: var(--theme-color)，只要变量更新，所有引用currentColor的border-color、fill都自动刷新 - 子元素自己没写
color，但父元素写了color: #3b82f6，它的border-color: currentColor就是#3b82f6 - SVG 内联图标写
fill: currentColor，比fill: inherit更稳——因为inherit在 SVG 元素上行为不一致，而currentColor是规范明确支持的
哪些属性能用 currentColor，哪些不能？
currentColor 仅限用于**接受颜色值的 CSS 属性**，且浏览器支持度有差异。现代浏览器（Chrome 65+、Firefox 61+、Safari 12.1+）已覆盖大部分场景，但仍有边界：
- ✅ 安全可用：
border-color、outline-color、text-decoration-color、fill、stroke、box-shadow - ❌ 明确不可用：
background-color（IE11 和旧版 Safari 直接忽略）、color自身（语法上等价于inherit，但语义冗余）、opacity、filter中的颜色参数 - ⚠️ 伪元素需手动打通：
::before和::after默认无color继承，必须显式加color: inherit，否则它的currentColor是初始黑色
兼容性兜底和性能影响
老浏览器（如 IE11）对 currentColor 支持有限，尤其在 box-shadow 和 background-color 中会静默失效。不能依赖单条声明，得用层叠 fallback：
border-color: #666;border-color: currentColor;
性能方面几乎无负担：currentColor 是 CSS 解析期静态绑定，不触发重排重绘，比 JS 动态改色轻量得多。但要注意：它不响应 color 的 CSS 动画过渡——动画过程中 currentColor 值不会插值更新，只在动画结束重绘时取新值。
最易被忽略的一点：currentColor 的“动态”依赖于宿主元素真正拥有一个可计算的 color 值。如果整个链路上没人显式设置（或通过变量间接设置）color，它就只能回退到浏览器默认黑色——这不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
