17370845950

currentColor 是 CSS 原生关键字，代表当前元素 color 属性的计算值，自动继承且动态响应；适用于边框、SVG 图标、阴影等需与文字同色的场景，但须显式设置 color 才生效。

currentColor 不是变量，也不是函数，它是 CSS 中一个**原生关键字**，代表当前元素的 color 属性计算值——换句话说，它就是“此刻生效的文字颜色”，且会自动继承、动态响应变化。

什么时候用 currentColor 最省事

当你需要边框、图标、阴影、轮廓等样式和文字颜色保持一致，又不想硬编码颜色值（比如 #007bff）时，currentColor 就是最佳选择。典型场景包括：

• 按钮的 border 和 box-shadow 跟文字同色
• 内联 SVG 图标的 fill 或 stroke 随文本变色
• 自定义复选框/单选框的边框与激活态背景统一主题
• 表单控件（如 input）聚焦时的 outline 用主题色

currentColor 怎么写才不翻车

它看起来简单，但几个关键点没注意就会失效：

• 必须确保元素或其祖先显式设置了 color（哪怕只是 color: inherit），否则多数浏览器会回退到默认黑色，导致边框/图标意外变黑
• 不能用在不接受 类型的属性上（例如 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，是规范行为。