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