在这种情况下，我们可以考虑CSS变量的后备值。像规范中解释的那样，我们可以这样写：
background:var(--color,inherit)
通过这样做，我们告诉属性（background）inherit在--color未定义的情况下使用。
这可能可以解决问题，但在我们的情况下，这是不够的，因为--color它 在:root级别定义，并且会被伪元素继承1，因此我们将永远不会使用后备值。
为了解决这个问题，我们可以考虑使用该initial值以取消定义自定义属性并强制使用后备值。如规范中所述：
自定义属性的 值为 ；也就是说，什么都没有。此初始值与var（）表示法具有特殊的交互作用，这在定义var（）的部分中进行了说明。
和
要将 属性值：
1. 如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的一手惯用中使用，则将custom属性视为具有其初始值作为此算法的其余部分。 2. 如果由var（）函数的第一个参数命名的自定义属性的值 ，请用相应的自定义属性的值替换var（）函数。除此以外， 3. 如果var（）函数 作为其第二个参数，请 。如果回退中有任何var（）引用，请也替换它们。 4. 否则，包含var（）函数的属性在计算值时间无效
我们的代码将如下所示：
:root {
--color:rgba(25,25,25,0.5); /*defined as the default value*/
}
.@R_557_2419@ {
width:50px;
height:50px;
display:inline-block;
margin-right:30px;
border-radius:50%;
position:relative;
}
.red {background:rgba(255,0,0,0.5);}
.blue {background:rgba(0,0,255,0.5);}
.@R_557_2419@:before{
content:"";
position:absolute;
top:0;left:0;right:0;bottom:0;
border-radius:50%;
transform:translateX(30px);
background:var(--color,inherit);
filter:invert(1);
}
<div class="@R_557_2419@ red" style="--color:initial;">
</div>
<div class="@R_557_2419@ blue" style="--color:initial;">
</div>
<div class="@R_557_2419@" style="background:grey;--color:initial;">
</div>
我们只需要设置initial为custom属性，以将强制inherit用作中的值background。
的用法initial也可以用于阻止CSS变量在特定级别 传播 ，因为默认情况下它是所有元素继承的。
这是一个例子：
:root {
--color: blue;
}
.container div{
border:5px solid var(--color,red);
padding:5px;
}
.stop {
--color:initial;
}
.green {
--color:green;
}
<div class="container">
<div>
<div>
<div class="stop"> <!-- we stop at this level -->
<div>
</div>
</div>
</div>
</div>
</div>
<div class="container stop"> <!-- we stop at this level -->
<div>
<div>
<div class="green"> <!-- we redefine at this level -->
<div>
</div>
</div>
</div>
</div>
</div>
602392714
清零编程群