CSS里的currentColor到底如何用

currentColor取当前元素自身最终计算出的color值，非继承父级颜色；失效主因包括SVG内联颜色覆盖、非内联引入、computed color为transparent或默认黑色，且不支持动画过渡。

currentColor 不是变量，也不是“取父级颜色”的快捷方式——它只读当前元素自身最终计算出的 color 值。只要这个值存在（哪怕来自继承、var(--theme-color) 或浏览器默认），currentColor 就能用；如果没设 color 且没被继承覆盖，它就回退为黑色 rgb(0, 0, 0)，不是透明，也不是报错。

内联 SVG 的 fill="currentColor" 为什么没变色？

最常见原因不是写法错，而是 SVG 源码里残留了硬编码颜色属性，它们优先级高于 CSS，会静默覆盖 currentColor：

1. 检查 <svg> 根标签和所有子元素（<path>、<circle> 等），删掉所有 fill、stroke、style="fill: #xxx"
2. 别在 <svg> 上写 color: inherit 或 fill: #333——这反而干扰层叠逻辑
3. 用 DevTools 查看目标元素的「Computed」面板，确认 color 是具体值（如 rgb(59, 130, 246)），不是 transparent 或 inherit
4. <img src="icon.svg"> 和 background-image: url(icon.svg) 完全不支持 currentColor，因为样式上下文被隔离

border-color: currentColor 在 IE11 或复合声明里失效

IE11 对 currentColor 的解析非常脆弱，尤其在简写属性中：

1. 在 IE11 中，border: 1px solid currentColor 会整条声明被忽略，必须拆开：border-width: 1px; + border-style: solid; + border-color: currentColor;
2. 即使现代浏览器支持，也建议避免在 border 复合声明中混用 currentColor，以防未来兼容性波动
3. 需要半透明边框（如 hover 时淡入），不能写 border-color: rgba(currentColor, 0.3)（语法错误），得用 color-mix(in srgb, currentColor 30%, transparent) 或 JS 动态计算

哪些属性能用 currentColor，哪些会静默失败？

它只在语法上接受 <color> 类型的属性中合法，不是名字带“色”就行：

1. ✅ 安全可用：border-color、outline-color、box-shadow（注意：透明度需用 rgba() 或 color-mix()）、text-shadow、fill/stroke（SVG 元素内）
2. ❌ 静默失败：opacity、filter、background-position、font-size —— 这些根本不认 currentColor，写了等于没写
3. Safari 15.4 之前不支持 box-shadow: ... currentColor；无 fallback，必须前置写死值靠层叠兜底

currentColor 不参与 CSS 动画过渡

给 color 加 transition，边框或阴影不会平滑变化，只在重绘完成时“跳变”：

1. 这不是 bug，是规范行为：currentColor 是计算值快照，不是实时插值信号
2. 要做渐变效果，得绕开它：用 color-mix()（推荐）、或自定义属性配合 JS 计算 RGBA
3. 最容易被忽略的一点：伪元素、SVG、边框三者都依赖同一份 color 计算结果，但更新时机不同步——改 color 后，fill 和 border-color 可能不同时重绘