currentColor是CSS关键字，始终取当前元素自身计算出的color值（无论来自继承、变量或默认），用于fill、border-color等属性；内联SVG需清除硬编码颜色才生效，且不支持动画过渡。
currentColor 不是变量，也不是继承父级颜色的快捷方式——它只读取**当前元素自身计算出的 color 值**。只要这个值存在（哪怕来自祖先链继承、var(--theme-color) 或浏览器默认），currentColor 就能用；但若该元素 color 计算结果为 transparent、unset 或根本未参与层叠，它就会回退为黑色（rgb(0, 0, 0)），而不是“失效报错”。
内联 SVG 的 fill="currentColor" 为什么没变色？
最常见原因不是写法错，而是 SVG 源码里残留了硬编码颜色属性，它们优先级高于 CSS，会静默覆盖 currentColor：
- 检查
<svg></svg>根标签和所有子元素（<path></path>、<circle></circle>等），删掉所有fill、stroke、style="fill: ..." - 别在
<svg></svg>上写color: inherit或fill: #333—— 这反而干扰层叠逻辑 - 用 DevTools 查看目标元素的「Computed」面板，确认
color是具体值（如rgb(59, 130, 246)），不是transparent或inherit -
<img src="icon.svg" alt="CSS中的currentColor关键字怎么高效使用？" >和background-image: url(icon.svg)完全不支持currentColor，因为样式上下文被隔离
border-color: currentColor 在 IE11 或复合声明里失效
IE11 对 currentColor 的解析非常脆弱，尤其在简写属性中：
-
border: 1px solid currentColor在 IE11 会整条声明被忽略，必须拆开：border-width: 1px;+border-style: solid;+border-color: currentColor; - 即使现代浏览器支持，也建议避免在
border复合声明中混用currentColor，以防未来兼容性波动 - 如果需要半透明边框（如 hover 时淡入），不能直接写
border-color: rgba(currentColor, 0.3)（语法错误），得用color-mix(in srgb, currentColor 30%, transparent)或 JS 动态计算
哪些属性能用 currentColor，哪些会静默失败？
它只在语法上接受 <color></color> 类型的属性中合法，不是名字带“色”就行：
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全可用：
border-color、outline-color、box-shadow（注意：透明度需用rgba()或color-mix()）、text-shadow、fill/stroke（SVG 元素内） - ❌ 直接失效：
font-size: currentColor是语法错误；opacity、filter、background-position都不认 - ⚠️ 半支持：
background-color: currentColor在 Safari 15.4 之前不支持；text-decoration-color: currentColor在 Safari 15.4 之前无 fallback，必须前置写死值靠层叠兜底
最容易被忽略的一点：currentColor 不参与 CSS 动画过渡。给 color 加 transition，边框或阴影不会平滑变化，只在重绘完成时“跳变”。要做渐变效果，得绕开它，用 color-mix() 或自定义属性配合 JS。
