currentcolor 直接读取元素自身计算出的 color 值，支持 border-color、fill、stroke、box-shadow（需 rgba）、text-shadow、background 渐变、伪元素 color 等显式声明颜色值的属性，但不自动继承、不穿透父级、不适用于外部 svg。
currentColor 不是变量，也不需要声明——它直接读取当前元素自身计算出的 color 值，改一处 color，所有显式用到它的属性（边框、图标、阴影等）立刻同步。但前提是：你得知道它在哪生效、在哪静默失效、以及为什么有时“改了 color 却没变色”。
哪些 CSS 属性支持 currentColor 且必须显式写？
它只在明确接受颜色值（<color></color>）的属性中起作用，且不会自动继承——必须手动写出来。常见遗漏点包括：
-
border-color: currentColor✅（按钮边框、分隔线）；但border: 1px solid currentColor也合法，别漏掉solid -
fill: currentColor/stroke: currentColor✅（仅对内联<svg></svg>有效；<img src="icon.svg">完全无效） -
box-shadow: 0 1px 2px rgba(currentColor, 0.2)✅；但box-shadow: 0 1px 2px currentColor❌（透明度必须用rgba()显式包裹） -
text-shadow: 1px 1px 2px currentColor✅（可直写，无需rgba()） -
background: linear-gradient(to right, currentColor, transparent)✅（渐变起点需手写，不会自动推导） -
::before { content: "•"; color: currentColor }✅（伪元素默认不继承color，必须显式设）
为什么 SVG 图标经常“不跟着变色”？
失效几乎从不来自 currentColor 本身，而是上下文断链或加载方式错误：
- 用了
<img src="icon.svg">—— 外部 SVG 是独立文档，currentColor完全不可见 - 内联 SVG 的
<path></path>写了硬编码fill="#000"，且没配 CSS 规则覆盖 —— 内联属性优先级高于外部样式 - 父元素
color是transparent或unset——currentColor读到的就是透明，图标“消失”，不是 bug 是预期行为 -
.btn svg { fill: currentColor }但.btn没设color，也没继承到有效值 —— 此时它取浏览器默认color: black，不是主题色
✅ 正确姿势：<svg class="icon"><path fill="currentColor"></path></svg> + .icon { color: #3b82f6; }（确保祖先或自身有可计算的 color）
换主题时最常漏掉的三个地方
只改 color 不够，这些依赖项必须同步显式使用 currentColor：
- 按钮悬停态的
border-color: currentColor和box-shadow: rgba(currentColor, 0.3)—— 否则 hover 时边框/阴影还是旧色 - 表单输入框的下划线：
background-image: linear-gradient(to right, currentColor, currentColor)（配合background-size控制长度） - 状态指示条、分割线、图标容器的
background-color——background-color支持currentColor，但很多人只记得border和fill
调试技巧：临时加 outline: 1px solid red; color: red;，看是否立即同步生效，快速验证计算值是否连通。
currentColor 不会“穿透”取父级 color，只读自身计算值
这是最容易误解的一点：currentColor 读的是当前元素自身的 color 计算结果，不是父元素的。这个值可能来自显式设置、继承、或浏览器默认（color: black），但它必须已参与计算。
-
.card { color: #ef4444; } .btn { /* 无 color 设置 */ } .btn svg { fill: currentColor; }→ 有效，因为.btn继承了color，已参与计算 -
.card { color: #ef4444; } .btn { color: transparent; } .btn svg { fill: currentColor; }→ 填的是透明，图标不可见 -
.card { color: #ef4444; } .btn { /* 无 color */ } .btn svg { fill: currentColor; } .btn svg path { fill: #000; }→ 无效，内联fill优先级更高
复杂点在于：它不触发重绘——JS 动态改 color 后，某些旧版 Safari 可能卡住；稳妥做法是改完后强制触发一次 layout（如读取 offsetHeight）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
