currentColor仅取元素自身计算后的color值，非父级穿透继承；伪元素需显式设color才生效，且不支持IE11/旧Safari的background-color；内联SVG才认fill="currentColor"，外链SVG无效；它不能赋值给CSS变量，也不参与过渡动画。
直接在支持颜色的 CSS 属性里写 currentColor，它就会自动取父元素计算后的 color 值——不需要额外声明、不依赖 JS、也不用设 color 在伪元素上。
为什么伪元素里 background-color: currentColor 有时不生效
常见错误是父元素没显式设置 color，或者用了 color: unset / color: initial。浏览器不会从祖先链“穿透”找 color，只看直接父级（即声明 ::before 的那个元素）的最终计算值。另外，IE11 和旧版 Safari 不支持 background-color 中使用 currentColor，会静默失效，不报错也不渲染。
- 检查父元素是否真有计算出的
color：用开发者工具「Computed」面板看color值是不是有效颜色（比如rgb(33, 33, 33)），而不是unset或inherit - 避免在伪元素上写
color: inherit—— 这会让currentColor指向伪元素自己的color（而它通常没文本内容，结果是默认黑） - 如果父元素是
<button>或<input>，注意用户代理样式表可能覆盖了你的color，加!important或提高选择器优先级
SVG 图标内联时 fill="currentColor" 失效的典型原因
不是所有 SVG 写法都认 currentColor。它只在 HTML DOM 中的内联 SVG 里生效，<img src="icon.svg"> 或 background-image: url(...) 完全隔离样式上下文，currentColor 对它们无效。
- 必须把 SVG 标签直接写进 HTML，不能外包成文件或用 CSS 引入
- 删掉 SVG 源码里所有硬编码的
fill、stroke属性（例如fill="#000"），否则会按层叠规则覆盖currentColor - 如果 SVG 是通过 JS 注入或框架（如 React）渲染的，确保属性名没被转义成
fill="%23000"等 URL 编码格式
currentColor 能用在哪些 CSS 属性上
它只在明确接受「颜色值」的属性中合法，不是所有带颜色字样的地方都能用。比如 background-image: linear-gradient(currentColor, #fff) 是无效的，整条声明会被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
border-color、outline-color、box-shadow、text-shadow、background-color（现代浏览器）、fill/stroke（SVG 元素内） - ❌ 不支持：
background-image（含渐变、data URI）、font-size、opacity、任何非颜色上下文 - ⚠️ 注意：
rgba(currentColor, 0.5)在部分旧浏览器中不支持，建议改用color-mix(in srgb, currentColor 50%, transparent)（Chrome 111+）或降级为自定义属性
最容易被忽略的是：currentColor 不是变量，不能赋给 CSS 自定义属性（--c: currentColor 无效），也不能在媒体查询或 @container 中动态重定义。它始终绑定到元素自身的 color 计算值，而这个值只在样式重排/重绘时更新——所以用 CSS 动画过渡 color 时，currentColor 相关效果不会平滑过渡，而是跳变。
