currentcolor生效需满足两个条件：元素自身有生效的color值，且目标属性明确设为currentcolor；失效主因是color继承链中断或外链svg不支持。
currentColor 能让边框、SVG 填充、阴影等自动跟随文字颜色，但必须满足两个硬性条件：元素自身有生效的 color 值（显式设置或继承链可达），且目标属性（如 fill、border-color）明确设为 currentColor。
为什么写了 currentColor 却没变色？
常见现象是图标/边框颜色始终是黑色或未响应主题切换。根本原因不是浏览器不支持，而是 currentColor 没拿到有效值：
- 父容器没设
color，且祖先链中所有color都被unset、transparent或initial中断——此时计算值退化为浏览器默认黑（rgb(0, 0, 0)），不是“无色” - SVG 是
<img src="icon.svg">外链形式：currentColor完全失效，只能用内联 SVG 或<use></use>引用符号 - 对内联 SVG 的
<path></path>写了 CSS 规则如path { fill: currentColor; }，但 HTML 层fill属性已硬编码（如fill="#666"），内联属性优先级高于 CSS，直接覆盖
SVG 图标填色必须写对位置和大小写
内联 SVG 中，currentColor 必须作为字符串写在 HTML 属性里，不是 CSS 声明：
- ✅ 正确：
<svg><path fill="currentColor" d="M0 0h24v24H0z"></path></svg>（注意双引号包裹、大小写敏感） - ❌ 错误：
<svg style="fill: currentColor"></svg>（style作用于<svg></svg>根节点，但子<path></path>的fill属性仍需单独设） - ❌ 错误：
<path fill="currentcolor"></path>（小写c不识别） - ⚠️ 注意：包裹 SVG 的容器（如
<span></span>或<button></button>）必须有可继承的color，否则根<svg></svg>拿不到计算值
字体图标和伪元素怎么用 currentColor？
字体图标本质是文字，不需要额外设 currentColor，但容易因冗余声明破坏继承：
- ✅ 正确：统一控制父容器
color，例如button { color: var(--primary); }，图标自然同步 - ❌ 错误：
.icon { color: #007bff; } .icon::before { color: currentColor; }（第一行已锁定颜色，第二行无效） - ⚠️ 某些 iconfont 库默认加了
color: inherit，此时只需确保父级color可达，无需任何额外样式 - ⚠️ 若伪元素内容是 Unicode 字符（如
content: "\e901";），它本就走文字渲染流程，直接继承父级color，currentColor是多余操作
哪些地方 currentColor 会静默失效？
它只在「接受颜色值」的属性上起作用，且部分场景有兼容性陷阱：
- ?
background-color: currentColor：IE11 和旧版 Safari 不支持，建议改用background: currentColor（简写属性兼容性更好） - ?
box-shadow: 0 0 4px currentColor：iOS 12 以下 Safari 渲染为透明，可用filter: drop-shadow()替代 - ?
font-size: currentColor：语法错误，currentColor不能用于非颜色上下文 - ⚠️
color: currentColor：合法但无意义，等于自引用，不会触发新计算
最常被忽略的是：currentColor 不响应 CSS 动画中的 color 过渡——动画期间它只取起始/结束帧的计算值，中间不会实时更新。需要动态变色时，得靠 JS 触发重排或换用 color-mix()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
