在这种情况下，我们可以考虑CSS变量的后备值。像规范中解释的那样，我们可以这样写：
background:var(--color,inherit)
通过这样做，我们告诉属性（
background）
inherit在
--color未定义的情况下使用。
这可能可以解决问题，但在我们的情况下，这是不够的，因为
--color它 总是
在
:root级别定义，并且会被伪元素继承1，因此我们将永远不会使用后备值。
为了解决这个问题，我们可以考虑使用该
initial值以取消定义自定义属性并强制使用后备值。如规范中所述：
自定义属性的 初始 值为 空值
；也就是说，什么都没有。此初始值与var（）表示法具有特殊的交互作用，这在定义var（）的部分中进行了说明。
和
要将 var（）替换为 属性值：
1.
如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的一手惯用中使用，则将custom属性视为具有其初始值作为此算法的其余部分。
2. 如果由var（）函数的第一个参数命名的自定义属性的值 不是初始值 ，请用相应的自定义属性的值替换var（）函数。除此以外，
3. 如果var（）函数 具有后备值 作为其第二个参数，请 用 fallback value 替换var（）函数
。如果回退中有任何var（）引用，请也替换它们。
4. 否则，包含var（）函数的属性在计算值时间无效
我们的代码将如下所示：
:root { --color:rgba(25,25,25,0.5); }.box { 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);}.box: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 ></div><div ></div><div ></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 > <div> <div> <div > <!-- we stop at this level --> <div> </div> </div> </div> </div></div><div > <!-- we stop at this level --> <div> <div> <div > <!-- we redefine at this level --> <div> </div> </div> </div> </div></div>1：关于自定义属性的继承，而不是背景属性
