currentcolor能直接替代重复颜色值，因它不需声明、无作用域限制，始终读取元素自身计算出的color值，改一处color即可同步边框、图标、阴影等所有使用处。
它不是变量，不声明、不作用域、不占命名空间，只要元素有计算出的 color 值，currentColor 就能读到——改一处 color，所有用它的边框、图标、阴影、伪元素自动同步。
currentColor 为什么能直接替代重复颜色值
你写十次 #3b82f6，换主题就得搜十次替换；而用 currentColor，只需在按钮、卡片或根节点上改 color，所有依赖它的样式立刻响应。它不靠 JS、不靠 CSS 变量、不靠构建工具，纯 CSS 运行时计算。
-
border-color: currentColor—— 按钮边框、分隔线、表单输入框下划线 -
fill: currentColor/stroke: currentColor—— 内联 SVG 图标（<svg><path fill="currentColor"></path></svg>） -
box-shadow: 0 1px 2px rgba(currentColor, 0.2)—— 注意必须用rgba()显式控制透明度，不能写box-shadow: ... currentColor -
background: linear-gradient(to right, currentColor, transparent)—— 下划线、状态指示条、渐变装饰
哪些地方容易误以为 currentColor 生效但其实失效
失效不是 currentColor 本身的问题，而是上下文没对齐：
- 用了
<img src="icon.svg">—— 外部 SVG 是独立文档，currentColor完全不生效 - SVG 内写了
fill="#000"且没加fill: currentColor的 CSS 规则 —— 内联属性优先级高于外部样式 - 父元素
color是transparent或unset——currentColor读到的就是透明，图标“消失” -
.btn svg { fill: currentColor }但.btn没设color，也没继承到有效值 —— 此时它取的是浏览器默认color: black，不是你想的主题色
配合 data-theme 实现一键换肤的关键点
靠 [data-theme="a"] { color: skyblue } 这类规则驱动 currentColor，比维护一堆 var(--primary) 更轻量，但要注意：
- 必须让目标元素自身或某个祖先显式拥有
color计算值（哪怕只是继承来的），currentColor才有源可取 - 不要指望
currentColor“穿透”两层以上去读远祖的color—— 它只读当前元素的color计算结果，继承链是否连通，得靠 DevTools 的 Computed 面板确认 - 伪元素如
::before默认继承父级color，所以color: currentColor在里面其实是冗余的（可省略），但fill或border-color必须显式写
最常被忽略的，是 currentColor 不会自动触发重绘——如果 JS 动态改了 color 但没触发 layout 或 paint，某些旧版 Safari 下可能卡住；稳妥做法是改完后强制一次 el.style.transform = 'translateZ(0)' 或操作 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
