currentcolor 是 css 原生关键字，始终等于元素当前 color 的计算值（非继承声明值），仅适用于颜色属性，不可赋值给自定义属性，现代浏览器支持但需注意兼容性与失效静默问题。
currentColor 不是“CSS变量的前身”这种说法容易误导——它压根就不是 CSS 自定义属性（--my-color）的早期形态，而是独立存在、语义明确、浏览器原生支持十多年的颜色关键字。
currentColor 的值从哪来？不是继承，是“计算后取 color”
MDN 明确说：currentColor 代表的是元素**当前计算出的 color 值**，不是靠 inherit 拷贝来的。这意味着：
- 如果元素自己写了
color: blue，currentColor就是blue - 如果没写
color，但父元素有color: #222，那它继承后计算出的color就是#222，currentColor也等于这个值 - 如果整棵树都没设
color，最终会落到浏览器默认文本色（通常是rgb(0, 0, 0)），currentColor就取这个
关键区别在于：inherit 是强制沿用父级声明值，而 currentColor 是实时读取本元素最终生效的 color 计算结果——哪怕这个结果来自 initial、revert 或层叠冲突后的胜出值。
为什么不能用 --c: currentColor 赋值给自定义变量？
CSS 自定义属性（--*）只接受静态值或函数调用，不支持运行时动态关键字解析。currentColor 是一个**在渲染时才求值的关键字**，不是字符串或可存储的值。
以下写法会被浏览器直接忽略：
:root { --text: currentColor; }
原因很简单：--text 此时还没绑定到任何元素，连“当前”是谁都不知道。真正起作用的方式永远是：
- 用
color控制主色调（显式或继承） - 在需要同步颜色的地方，直接写
border-color: currentColor、fill: currentColor等
想封装主题色？别试图存 currentColor，而是统一改 :root 或组件的 color，让所有 currentColor 自动响应。
哪些地方能用 currentColor？哪些会意外失效？
它支持所有接受 <color></color> 类型的 CSS 属性，比如：
-
border-color、outline-color、box-shadow、text-shadow -
background-color（注意：不适用于background-image: linear-gradient()中的 IE10/Edge 旧版 bug） -
fill和stroke（SVG 元素内直接写fill: currentColor即可） -
::before/::after的color、background-color（但 Safari ≤8 对伪元素中currentColor支持不全）
容易踩坑的点：
- 不要在
@keyframes动画里依赖currentColor变化——动画帧中它不会重新计算，始终取动画开始时的值 - 不要指望
currentColor在filter: drop-shadow()里生效——drop-shadow不接受颜色关键字，必须写死色值 -
currentColor在mask-image或clip-path的 color 部分也不可用
真正难把握的其实是它的“延迟求值”特性：你改了 color，所有用到 currentColor 的地方确实会同步变，但这个过程不触发重排，只重绘，且依赖于样式计算顺序。一旦混入 !important、CSS-in-JS 动态注入或 Shadow DOM 边界，currentColor 的行为就可能和直觉不一致——这时候得用 DevTools 的 Computed 面板逐层看 color 实际值，而不是猜它“应该”是多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
