CSS变量在多浏览器前缀径向渐变中的异常问题

可正常运行的基础代码 #

以下代码能正常渲染出带径向渐变的圆形元素：

CSS代码 #

.my_div{
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  border: solid 1px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.bg1{
  background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
  background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
  background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}

HTML代码 #

<div class="my_div bg1">.bg1</div>

引入CSS变量后的问题 #

当定义根变量:root{--color2: 23;}，并仅在-webkit-radial-gradient中使用该变量时（如下），渐变能正常显示：

background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);

但只要给其他带前缀的渐变（如-moz-radial-gradient、标准radial-gradient）也添加该变量，所有浏览器中的渐变都会失效。

测试代码片段 #

以下是用于验证问题的完整代码：

CSS代码

:root{--color2: 23;}
.my_div{
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  border: solid 1px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.bg1{
  background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
  background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
  background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}
.bg2{
  background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
  background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
  background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}
.bg3{
  background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
  background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
  background-image: radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}

HTML代码

<div class="my_div bg1">.bg1</div>
<div class="my_div bg2">.bg2</div>
<div class="my_div bg3">.bg3</div>

尝试过的其他无效方案 #

• 复合变量方案：定义复合变量--compozite-color: hsla(var(--color2), 100%, 56%, 1)，仅单个前缀渐变使用该变量时有效；若多个前缀渐变都使用，连之前正常的webkit环境也会失效。
• 拆分类名方案：将不同前缀的渐变拆分为独立类名，同时添加到元素上时，仅单个前缀的类名生效，多类名叠加无效。

内容的提问来源于stack exchange，提问作者MTK