currentColor 是 CSS 原生关键字，代表当前元素 color 属性的计算值，自动继承且动态响应；适用于边框、SVG 图标、阴影等需与文字同色的场景，但须显式设置 color 才生效。
currentColor 不是变量，也不是函数，它是 CSS 中一个**原生关键字**，代表当前元素的 color 属性计算值——换句话说，它就是“此刻生效的文字颜色”，且会自动继承、动态响应变化。
什么时候用 currentColor 最省事
当你需要边框、图标、阴影、轮廓等样式和文字颜色保持一致，又不想硬编码颜色值（比如 #007bff）时，currentColor 就是最佳选择。典型场景包括：
- 按钮的
border和box-shadow跟文字同色 - 内联 SVG 图标的
fill或stroke随文本变色 - 自定义复选框/单选框的边框与激活态背景统一主题
- 表单控件（如
input）聚焦时的outline用主题色
currentColor 怎么写才不翻车
它看起来简单，但几个关键点没注意就会失效：
- 必须确保元素或其祖先显式设置了
color（哪怕只是color: inherit），否则多数浏览器会回退到默认黑色，导致边框/图标意外变黑 - 不能用在不接受
<color>类型的属性上（例如background-image的 url() 里不能直接写currentColor） - 在伪元素（如
::before）中使用时，currentColor继承的是该伪元素宿主元素的color，不是伪元素自己设置的color（它自己不能设color） - IE8 及更早版本完全不支持；IE9+ 和所有现代浏览器都支持，无需前缀
一个真实可用的按钮示例
下面这段代码让按钮的文字、边框、阴影、SVG 图标全部共用一个颜色源：
立即学习“前端免费学习笔记（深入）”；
.btn {
color: #2563eb;
border: 2px solid currentColor;
box-shadow: 0 1px 3px currentColor;
}
.btn svg {
fill: currentColor;
}
只要改一行 color，整套视觉就同步更新。如果配合 CSS 自定义属性（如 color: var(--theme-color)），还能无缝接入主题系统。
最容易被忽略的一点：别以为没写 color 它也会“聪明地猜”——它不会。没设 color，currentColor 就是浏览器默认的黑色（或透明，取决于上下文），这不是 bug，是规范行为。
