currentcolor 是只读 css 关键字，值恒等于当前元素 color 计算值；仅在内联 svg 中生效，需确保宿主元素有可继承的 color，且不响应 color 动画。
currentColor 不是变量，不能赋值、不能声明、不能用 var() 接收——它是一个只读的 CSS 关键字，值永远等于当前元素的 color 计算值。
为什么currentColor写在fill里却没变色？
常见错误是把 SVG 写成 <img src="icon.svg"> 或放在 <use></use> 里但原始 <symbol></symbol> 声明了 fill="#000"。这两种情况都会切断样式控制权。
-
fill="currentColor"只在内联 SVG 中生效（即 SVG 标签直接写在 HTML 里） - 如果 SVG 被包裹在
<svg></svg>标签中，必须确保该标签自身有可继承的color（比如父<span></span>设了color: red） - 不要写
fill: currentColor在 CSS 里作用于<path></path>—— 内联 SVG 的fill属性只认字符串值，不是 CSS 属性
border-color: currentColor 为啥还是黑的？
不是语法错，而是该元素根本没计算出有效的 color 值。浏览器会回退到默认黑色（rgb(0, 0, 0)），而不是“透明”或“未定义”。
- 检查是否漏写了
color声明，哪怕只是color: inherit - 注意选择器权重：如果某条高权重要求
color: #fff被覆盖了，currentColor就取不到白 -
button、input等表单元素有 UA 样式，可能覆盖你设的color，需显式重置
::before 里用 background-color: currentColor 失效？
伪元素本身没有文本内容，不参与 color 继承链，但它能读取宿主元素（即声明 ::before 的那个元素）的 color 计算值。
- 只要宿主元素有明确的
color（哪怕来自继承），::before就能用currentColor - 别在伪元素里写
color: currentColor—— 没意义，伪元素没文字可渲染 - 禁用状态（
:disabled）下颜色不变？大概率是:disabled选择器没给宿主元素改color，而非currentColor不响应
最易被忽略的一点：currentColor 不会响应 color 的 CSS 动画过渡；它只在样式重排/重绘时更新，不是实时监听器。需要动画效果，得靠自定义属性 + JS 或 color-mix() 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
