currentColor图标变黑的根本原因是元素未获得有效color计算值，而非浏览器不支持；它取自身最终color值（可能为默认黑rgb(0,0,0)），需确保继承链完整、内联SVG清除硬编码颜色、且正确使用fill="currentColor"（大小写敏感）。
能，但必须确保 color 值真正“落地”且图标渲染路径支持 currentColor —— 否则它永远是浏览器默认黑（rgb(0, 0, 0)），不是透明，也不是未定义。
为什么写了 currentColor 图标却还是黑色？
根本原因不是浏览器不支持，而是元素没拿到有效的 color 计算值。它不看父级有没有设 color，只看“自己最终算出来的是什么”：
- 如果元素自身没设
color，又没被任何祖先继承链覆盖，它的color就是浏览器默认的rgb(0, 0, 0)，currentColor就是黑 - 祖先用了
color: unset、color: transparent或color: initial，会中断继承链，导致子元素color退化为默认黑 - 外链 SVG（
<img src="icon.svg">）完全不支持currentColor，它压根收不到宿主元素的 color 值
内联 SVG 的 fill="currentColor" 怎么写才生效？
关键在 HTML 属性层，不是 CSS 层 —— 内联 SVG 的 <path></path> 必须用字符串形式显式声明 fill="currentColor"，且大小写敏感：
- ✅ 正确：
<svg><path fill="currentColor" d="M0 0h24v24H0z"></path></svg>（双引号包裹，C 大写） - ❌ 错误：
<path fill="currentcolor"></path>（小写 c 不识别） - ❌ 错误：
<svg style="fill: currentColor"></svg>（style作用于<svg></svg>根节点，但子<path></path>的fill属性仍需单独设） - ⚠️ 若
<path></path>已有硬编码fill="#666"，会直接覆盖currentColor，必须删掉
字体图标和伪元素要不要手动设 currentColor？
绝大多数情况下——不需要。字体图标本质是文字，天然继承 color；伪元素生成的 Unicode 字符（如 content: "\e901";）也走文字渲染流程：
- ✅ 正确做法：统一控制父容器
color，例如button { color: var(--primary); }，图标自动同步 - ❌ 错误操作：
.icon { color: #007bff; } .icon::before { color: currentColor; }（第一行已锁定颜色，第二行冗余且无效） - ⚠️ 某些 iconfont 库默认加了
color: inherit，此时你只需确保父级color可达，无需任何额外样式
边框、阴影、背景这些地方用 currentColor 有什么坑？
它们支持 currentColor，但兼容性和行为细节容易被忽略：
-
border-color: currentColor和fill: currentColor在 IE9+、Chrome、Firefox 中稳定，但旧版 Safari（iOS 8 及更早）在box-shadow或linear-gradient中可能失效 -
background-color: currentColor可用于镂空图标（sprite 图），但需确保背景图本身是镂空设计，否则颜色会被遮盖 -
currentColor不支持transition动画，改color时，依赖它的属性会立即更新，不会渐变 - 别把它当 CSS 变量用——它只读取
color属性，不能绑定--theme-color等自定义属性
最常被忽略的一点：currentColor 不是“继承父级 color”，而是“取自身最终计算出的 color”。哪怕这个值来自 color: var(--text) 或 color: inherit，只要它算出来了，currentColor 就跟着动；但一旦计算链断在某一层（比如中间某个容器写了 color: unset），后面全黑，毫无商量余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
