既然我们在css中有了自定义properties]，我们就可以完全控制css中的变量了。但即使在这些变得有用之前，我们也可以使用css颜色模块级别3，CurrentColor]提供的关键字来保持元素内颜色的一致性。
CurrentColor的作用类似于元素上Color属性的当前值的变量。而且css的级联部分仍然有效，所以如果元素上没有定义Color属性，级联将确定CurrentColor的值。
用法
当您希望某个元素中的某个颜色保持一致时，CurrentColor非常有用。例如，如果您希望元素的边框颜色与元素的文本颜色相同，则使用CurrentColor很有意义，因为如果您决定主要文本颜色，则只能在一个位置更改值。
示例
言辞固然不错，但没有什么能胜过榜样！在一个简单的例子中，让我们在几个不同的地方使用CurrentColor。您将看到CurrentColor作为SVG的`ill‘属性的值是如何真正有用的。
下面是我们的最后一个示例(如果可以，请将鼠标悬停在它上面)：
[美国鳄鱼协会bGprJqg 340]
首先，我们的加价：
1<div class="outer-circle">
2 <svg width="150" height="150" viewBox="0 0 322 322">
3 <g fill="none" fill-rule="evenodd">
4 <circle class="main-circle" cx="161" cy="161" r="161"/>
5 <circle class="left-eye" fill="#6A76C0" cx="108" cy="109" r="25"/>
6 <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"/>
7 <circle fill="#6A76C0" cx="221" cy="109" r="25"/>
8 </g>
9 </svg>
10</div>
正如您所看到的，没有什么特别的标记，只有一个外部的‘div’和一个简单的SVG图形。
神奇的✨出现在css样式中：
1.outer-circle {
2 color: gold;
3 border: 10px solid currentColor;
4 box-shadow: 0px 0px 15px currentColor;
5
6 width: 200px;
7 height: 200px;
8 border-radius: 50%;
9 margin: 2rem auto;
10
11 display: flex;
12 align-items: center;
13 justify-content: center;
14}
15
16.main-circle {
17 /* inherited from parent */
18 fill: currentColor;
19}
20
21.outer-circle:hover .left-eye {
22 fill: currentColor;
23}
更重要的是，Color的值可以只是一个很好的css变量，并且CurrentColor仍然会以我们的期望值结束：
[短吻鳄BaKdEZQ 340]
除了外层圆圈上增加了一个类之外，标记基本相同：
1<div class="outer-circle alternative">
2 <!-- ... -->
3</div>
然后在样式中，我们覆盖.outer-circle中的颜色，并使用本网站上可用的CSS变量之一的值：
1.alternative {
2 color: var(--code);
3}
总结
您使用CurrentColor的里程可能会有所不同，因为许多包含颜色的属性无论如何都会默认为Color的当前值(border、box-shadow、text-decoration...)。再加上我们现在有了完善的css变量，你可能会发现这些天你不会经常从你的袋子里拿出‘CurrentColor’。尽管如此，如果有需求的话，它是存在的。确保SVG图标使用与当前文本颜色相同的颜色填充会特别有用。
浏览器支持