currentColor本质是读取并复用当前元素自身最终计算出的color值，非变量也非继承父级快捷方式；失效主因是SVG内联颜色覆盖、父容器未设color、外部引入SVG或computed color为transparent/黑色。
currentColor 本质是“读取并复用当前 color 值”
它不是变量，也不需要声明，而是 CSS 关键字，直接读取当前元素最终计算出的 color 值（可能是显式设置、继承来，或浏览器默认的 black）。这个值能被 fill、stroke、border-color、text-shadow 等所有接受颜色的属性显式引用——但必须手动写出来，不会自动生效。
为什么内联 SVG 中 fill="currentColor" 失效？
失效几乎从不因为 currentColor 本身，而是结构或加载方式出了问题：
- SVG 源码里残留硬编码颜色，比如
fill="#000"、stroke="red"或style="fill: none"—— 这些内联属性优先级高于 CSS，会静默覆盖fill: currentColor - 父容器没设
color，导致 currentColor 回退为黑色或透明；用 DevTools 查看该元素的computed color，确认值是否符合预期 - 用了
<img src="icon.svg">或background-image: url(icon.svg)—— 外部 SVG 是独立文档，currentColor 完全无法穿透上下文，一律失效 -
<svg>根标签写了style="color: inherit"，反而干扰默认继承逻辑；它本就继承，无需额外干预
fill="currentColor" 写在 <svg> 上还是 <path> 上？
优先写在 <svg> 根标签上，最省事也最可靠：
-
<svg fill="currentColor"><path d="..."></svg>—— 现代浏览器自动向下透传给所有子图形，只要子元素没自己声明fill -
<svg><path fill="currentColor" d="..."></svg>—— 可行，但容易漏掉多个<path>、<circle>或<g>里的子项 - 纯 CSS 控制如
svg path { fill: currentColor }—— 在<use href="#icon">场景下常选不到渲染后的内容，且易被更高权重规则覆盖
哪些地方必须显式写 currentColor 才能生效？
currentColor 不会自动“扩散”到所有颜色相关属性，以下常见场景必须手写：
立即学习“前端免费学习笔记（深入）”；
-
border-color: currentColor—— 按钮边框、卡片分割线 -
box-shadow: 0 1px 2px rgba(currentColor, 0.2)—— 注意不能简写成box-shadow: 0 1px 2px currentColor，透明度需用rgba() text-shadow: 1px 1px 2px currentColorbackground: linear-gradient(to right, currentColor, transparent)-
::before { content: "•"; color: currentColor }—— 伪元素内容默认不继承color -
<linearGradient><stop stop-color="currentColor"></stop></linearGradient>—— 渐变色也可适配主题
最容易被忽略的是：父级 color 设为 transparent 或 unset，图标看似“消失”，其实 fill: currentColor 已生效，只是填了透明色。调试时可临时加 outline: 1px solid red 和 color: red 快速验证计算值是否符合预期。
