currentColor

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

当讨论“CSS 的未来”时,CSS 变量始终是一个热门话题。 它们实际上 即将 本机化,但在生产中使用它们(不使用 CSS 预处理器 框架)还有很长的路要走。 但是,现在确实有一个功能具有一定的浏览器支持,它具有 CSS 变量的感觉,那就是 currentColor 值。

它是这样工作的

div { 
  color: red; 
  border: 5px solid currentcolor;
  box-shadow: 0 0 5px solid currentcolor;
}

我是在 2011 年 SXSW 上的 CSS3 讨论会上了解到这一点的,与会者有 StephanieGreg Rewis、Estelle Weyl 以及 Christopher Schmitt。 在谷歌上搜索后,我找到了 Divya Manian 的文章,她写道

[…] 您可以使用此值来指示您想要使用颜色值以应用于接受颜色值的其它属性:边框、框阴影、轮廓或背景。

此值最初于 2009 年由 Opera 支持,此后,Firefox 3.5+、Chrome 1+ 和 Safari 4+ 也开始支持。

这是 规范Can I Use 信息

它将遵循层叠样式表

body { color: red; }
div { border: 5px solid currentcolor; }

您无法欺骗它。

假设您想利用它的变量特性,但随后重置实际文本的颜色……这将不起作用

div {
   color: red;
      
   border: 5px solid currentcolor;
   box-shadow: 0 0 5px currentcolor; 
    
   color: black;
 }

所有内容都将变成黑色。

用例

来自 simurai