currentColor生效需满足三条件：图标属性写对（fill="currentColor"）、父容器有生效color值、无硬编码覆盖；字体图标天然继承color；border-color和box-shadow用currentColor存在旧浏览器兼容问题。
直接用 currentColor 就能统一图标和文字颜色，但前提是图标的颜色控制方式匹配、且元素有生效的 color 值——不是“写了就灵”，而是“写对了才生效”。
内联 SVG 的 fill="currentColor" 为什么有时不生效
最常见原因不是语法错，而是继承链断了或被硬编码覆盖：
-
fill="currentColor"必须写在<path>或<svg>标签的 HTML 属性里，大小写严格，不能写成fill="currentcolor"或fill: currentColor（后者是 CSS 语法，不适用于内联属性） - 父容器没设
color，比如<p>没加style="color: #3b82f6"，currentColor就回退为浏览器默认黑（rgb(0, 0, 0)），图标看似“没变色”，其实是黑了 -
<path fill="#000">这类硬编码会直接覆盖fill="currentColor"，必须删掉所有显式fill或stroke内联值 -
<svg>被包裹在<button>或<span>里没问题，但该容器本身得参与 color 继承——如果它写了color: unset或color: transparent，currentColor就跟着变透明，图标可能“消失”
字体图标（IconFont）要不要手动设 color: currentColor
绝大多数不用——字体图标本质是文字，天然继承 color，设 color: currentColor 是冗余操作：
- 像 Font Awesome 6、IconPark 的
<i class="icon-home"></i>，只要父容器（如<button>）有生效的color，图标就自动同步 - 一旦你给图标元素加了
style="color: red"或.icon { color: #666 }，继承链就断了；DevTools 里看 computedcolor值，如果不等于父级，说明被某条 CSS 强制覆盖了 - 自定义字体图标要注意
@font-face是否加了font-display: optional，极少数情况下会导致首次渲染时color未及时生效
border-color 和 box-shadow 用 currentColor 的兼容性坑
这两个属性支持 currentColor，但旧版浏览器静默失效，容易排查困难：
立即学习“前端免费学习笔记（深入）”；
-
border-color: currentColor在 IE11 和 Safari ≤9 中完全支持；但border: 1px solid currentColor在 IE11 会整条失效，建议拆成border-width、border-style、border-color单独写 -
box-shadow: 0 0 4px currentColor在 Safari ≤13.1 中静默不渲染（不报错也不显示），需降级：先写box-shadow: 0 0 4px #94a3b8，再覆盖一层box-shadow: 0 0 4px currentColor -
background-color: currentColor在 IE11 和 Safari ≤9 中不支持，会回退为透明，千万别在这儿踩坑
伪元素（::before/::after）里用 currentColor 的细节
伪元素本身没有 color 属性，但它能继承父元素的 color，所以 color: currentColor 合法且有效：
- 示例：
.btn::after { content: "→"; color: currentColor; margin-left: 4px; }—— 箭头是文本，直接响应父级color - 如果伪元素内容是 SVG（比如用
content: url(icon.svg)），currentColor不生效；只有内联 SVG 或 Unicode 字符才适用 - 如果父元素没显式设
color，currentColor仍会取计算值（比如从<body>继承的默认色），不是“无效”，而是“有默认”
最易被忽略的一点：它取的是当前元素自身最终计算出的 color 值，不是父级的声明值；动画中改 color，currentColor 不会平滑过渡，只在重绘完成时“跳变”。
