CSS自定义属性作为另一个的后备值，而不是固定（预定义）值

CSS自定义属性在缺少变量的情况下允许回退值，例如：

:root {
--color1:red;
--color2:blue;
}
body {
background:var(--color1,gray);
color:var(--foo,yellow);
}


会导致BODY的背景颜色为红色（因为--color1确实存在），但文本的颜色为黄色，因为--foo的自定义属性不存在存在。

似乎也无法将CSS自定义属性也用作后备值，因此此代码：

body {
background:var(--color1,--color2);
}


不会产生 blue 文本，但是会使用默认的浏览器颜色，通常是黑色。

为什么这种行为？

只能使用var（）函数访问自定义属性或CSS变量。

使用var(--my-var,var(--my-background,pink))。

有关更多信息，请签出Custom property fallback values。