currentColor 取当前元素自身最终计算出的 color 值，未设置时回退为黑色；SVG 中需确保元素在 color 作用域内且无硬编码 fill；不可赋值给 CSS 自定义属性，动画中不支持平滑过渡。
currentColor 不是变量，也不是继承父级 color 的 shortcut——它取的是**当前元素自身最终计算出的 color 值**。只要这个值存在（哪怕来自祖先链继承），currentColor 就能用；但如果你没设 color，又没被继承覆盖，它就回退到浏览器默认黑（rgb(0, 0, 0)），不是透明，也不是 undefined。
内联 SVG 中 fill="currentColor" 为什么有时不生效？
常见错误是：SVG 根元素（<svg>）没参与 color 继承链，或者内部 <path> 被硬编码了 fill 属性。
-
<svg>必须在 DOM 中“可见”且处于 color 作用域内——比如它被包裹在<p style="color: red">里，而不是孤立挂载 - 不能写
<path fill="#000">，否则会覆盖fill="currentColor"；删掉所有显式fill或stroke内联属性 -
fill="currentColor"是字符串，大小写敏感；别写成fill: currentColor在 HTML 属性里（那是 CSS 语法） - 如果 SVG 外层套了
<span>但没设color，而父级有color，得确保该<span>没被color: inherit以外的方式阻断继承
font-icon 图标怎么用 currentColor？
字体图标（如 Font Awesome 的 <i class="fa fa-home">）本质是文字，天然响应 color，所以只需确保其容器或自身设置了 color，无需额外操作。
- 如果用了 SVG 版本的 icon 组件（比如通过 JS 渲染的
<svg>），必须手动加fill="currentColor"或在 CSS 里写.icon svg { fill: currentColor; } - 避免给图标元素设
color: transparent——这会让currentColor变成透明黑，图标可能“消失”，而非隐形 - 伪元素生成的图标（如
::before { content: "★"; color: currentColor; }）直接生效，但需注意content是文本，不是 SVG，不涉及fill
border-color: currentColor 在哪些场景会失效？
它在绝大多数现代浏览器中稳定可用，但有两个典型坑：
-
background-color: currentColor在 IE11 和旧版 Safari（≤9）中完全不支持，会回退为透明或初始值，慎用 -
box-shadow: 0 0 4px currentColor在 Safari ≤13.1 中静默失效（不报错也不渲染），可改用border或outline替代 - 动画中改
color，currentColor不会平滑过渡——它只在重绘时更新，不是实时插值，视觉上可能“跳变” - JS 动态修改
element.style.color后，某些旧版 Chrome（≤95）可能延迟触发currentColor重计算，需强制getComputedStyle触发重排
为什么 --theme-color: currentColor 是无效的？
currentColor 不能赋值给 CSS 自定义属性，浏览器会直接忽略该行声明。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确路径：
color: var(--text-color); border-color: currentColor;——让currentColor跟随变量控制的 color - ❌ 错误写法：
--c: currentColor;或color: var(--c);——--c值为空，color降级为默认黑 - ⚠️ 混合陷阱：若父级
color: var(--primary)，子元素用fill: currentColor是 OK 的；但若父级color是 JS 直接写style.color，且未触发 layout，currentColor可能滞后
color，中间某层写了 color: initial，那层及其子元素的 currentColor 就崩了。调试时直接查 computed style 里的 color 值，比猜继承链更可靠。 
