既然我们在 CSS 中有自定义属性，我们几乎可以完全控制 CSS 中自己的变量。但即使是那些之前成为有用的，我们可以用一个关键字可用，因为CSS颜色模块级别3，currentColor以保持颜色元素中是一致的。

currentColor充当color元素上属性当前值的变量。并且CSS的Cascading部分仍然有效，因此如果color元素上没有定义的属性，则级联将确定 的值currentColor。

用法

currentColor当您希望某种颜色在元素中保持一致时，这很有用。例如，如果您希望元素的边框颜色与元素的文本颜色相同，则使用currentColor很有意义，因为如果您决定主要文本颜色，则只能在一处更改值。

一个例子

词都很好，但没有什么比一个例子更好的了！让我们currentColor在一个简单的例子中在几个不同的地方使用。您将看到如何currentColor作为fillSVG 属性的值也非常有用。

这是我们最终示例的样子（如果可以，请将鼠标悬停在上面）：

首先，我们的标记：

<div class="outer-circle">
  <svg width="150" height="150" viewBox="0 0 322 322">
    <g fill="none" fill-rule="evenodd">
      <circle class="main-circle" cx="161" cy="161" r="161"/>
      <circle class="left-eye" fill="#6A76C0" cx="108" cy="109" r="25"/>
      <path d="M112 239h99a49.5 49.5 0 0 1-99 0zM161 201c13.8 0 25-26.2 25-40 0-9.2-8.3-17.5-25-25-16.7 7.5-25 15.8-25 25 0 13.8 11.2 40 25 40z" fill="#51BAB6"/>
      <circle fill="#6A76C0" cx="221" cy="109" r="25"/>
    </g>
  </svg>
</div>

如您所见，标记div并没有什么特别之处，只有一个外部和一个简单的 SVG 图形。

神奇的 ✨ 发生在 CSS 样式中：

.outer-circle {
  color: gold;
  border: 10px solid currentColor;
  box-shadow: 0px 0px 15px currentColor;

  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 2rem auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.main-circle {
  /* inherited from parent */
  fill: currentColor;
}

.outer-circle:hover .left-eye {
  fill: currentColor;
}

更重要的是， for 的值color可以只是一个 CSS 变量，currentColor最终仍会是我们的预期值：

标记基本相同，只是在外圈增加了一个类：

<div class="outer-circle alternative">
  <!-- ... -->
</div>

然后在样式中，我们覆盖颜色.outer-circle并使用此站点上可用的 CSS 变量之一的值：

.alternative {
  color: var(--code);
}

包起来

您的里程currentColor可能会有所不同，因为许多包含颜色的属性将默认为当前值color( border, box-shadow, text-decoration…)。再加上我们现在拥有完整的 CSS 变量这一事实，您可能会发现currentColor这些天您不会经常从自己的技巧袋中取出来。尽管如此，如果有需要，它就在那里。确保 SVG 图标填充与当前文本颜色相同的颜色会变得特别有用。

浏览器支持

我可以使用 currentcolor 吗？来自 caniuse.com 的主要浏览器对 currentcolor 功能的支持数据。