currentColor 是 CSS 中动态继承当前元素 color 计算值的关键字，使边框、图标、阴影等自动同步文字颜色，改一处 color 即全局响应，无需重复定义或 JS 干预；它严格取本元素自身计算后的 color 值，非自动继承父级，仅作用于接受 <color> 类型的属性，不支持 transition。
currentColor 能让边框、图标、阴影等自动匹配文字颜色，改一处 color 就全局同步，不用重复写颜色值，也不依赖 JS 或 CSS 变量。
border-color: currentColor 为什么比写死颜色更可靠
直接写 border-color: #007bff 看似简单，但一旦主题色变更、暗色模式切换或 hover 状态调整，所有边框都得手动改。而 border-color: currentColor 始终读取本元素当前生效的 color 计算值——哪怕这个值来自 color: inherit 或 color: var(--theme-color)，它都能立刻响应。
- 按钮悬停时只需
:hover { color: #dc2626; }，边框和阴影自动变红 - 禁用态用
opacity: 0.5或color: #94a3b8，边框透明度/灰度也同步变化 - 避免在
border复合声明里混用：border: 1px solid currentColor在 IE11 会整条失效；应拆成border-width、border-style、border-color单独写
SVG 图标 fill: currentColor 不起作用的常见原因
内联 SVG 的 fill="currentColor" 或 CSS 中 svg { fill: currentColor; } 失效，往往不是语法错，而是 color 继承链断了：
- 父容器没设
color，且祖先链上也没显式声明——此时currentColor回退为浏览器默认黑色（rgb(0, 0, 0)），图标看似“没变色”，其实是黑了 - SVG 元素本身有
fill属性（如fill="#333"），它会覆盖 CSS 中的fill: currentColor；需移除行内fill或用!important强制（不推荐） - 伪元素（如
::before）默认不继承color，若在其中用fill: currentColor，得先加color: inherit
box-shadow 和 text-decoration-color 用 currentColor 的兼容性坑
box-shadow: 0 0 4px currentColor 和 text-decoration-color: currentColor 在现代浏览器中很稳，但老版本 Safari（
立即学习“前端免费学习笔记（深入）”；
- 必须提供降级：先写
box-shadow: 0 0 4px #666;，再覆盖box-shadow: 0 0 4px currentColor;，靠层叠顺序兜底 -
text-decoration-color在 Safari 15.4 之前不支持，且无法用text-decoration复合属性设置颜色；只能单独声明并配 fallback - 不要指望
currentColor在动画中实时更新：给color加transition，边框/阴影不会平滑过渡，只在重绘完成时“跳变”
最易被忽略的一点：currentColor 不是“取父级 color”，而是“取本元素自己的 color 计算值”。哪怕你只在 :root 设了 color，子元素没写任何 color，它的 currentColor 依然有效——因为继承后已计算出确定值。但如果你在某个中间层写了 color: initial，那之后所有后代的 currentColor 都会变成初始黑色，而不是跳过它去取更上层的值。
