代码之家 › 专栏 › 技术社区 › MTK

css—具有多种用途的变量奇怪行为

css html

MTK · 技术社区 · 1 年前

这个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%);
}

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

如果我尝试 :root{--color2: 23;} 和 background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%); 也没关系。

但是如果我再加一行 -moz-radial-gradient 或 -o-radial-gradient 或 ms-radial-gradient 或者简单地 radial-gradient 具有 hsla(var(--color2), 100%, 56%, 1) 在所有导航器中都失败了

有关实时结果,请参阅代码片段:

: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%);
}

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

我也尝试过:

:root{
    --color2: 23;
    --compozite-color: hsla(var(--color2), 100%, 56%, 1);
}

在css中,多个导航器不工作。。。只为一个人工作

这项工作:

background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, var(--compozite-color) 100%);

这不起作用: (以前工作过的webkit中也没有)

background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, var(--compozite-color) 100%);
background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, var(--compozite-color) 100%);

我也尝试过(但没有工作):

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

.bg_moz{    
    background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%); 
}

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

...

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

这(只适用于一个导航器)有效(但对我没有帮助)

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

1 回复 | 直到 1 年前

qrsngky 1 年前

简短回答:

CSS声明(非固定版本)应为:

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

更多解释:

您的原始声明 background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%); 无效。它与描述不匹配 here .

我在谷歌上搜索过 "center center, circle contain" 并找到 this link 上面写着 径向渐变的语法已更改 (顺便说一句,那是2012年)。
所以,当 -webkit-radial-gradient 和 -moz-radial-gradient 仍然支持旧语法, radial-gradient 不。

然而,(在没有变量的情况下),当遇到无效语法时,浏览器会忽略它。例如,在Chrome中,正如您从开发人员工具中看到的,应用于 .bg1 是 background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%); . 请注意,它还忽略 -moz径向梯度 一

但是,当存在变量时,它不会“简单地忽略无效值”。相反,它无论如何都会将属性值与变量一起使用(覆盖以前的值),并且只有在替换后才会失败(请参见 this other thread ).

这也解释了为什么 .bg2 在Chrome中不起作用(它试图加载 -moz径向梯度 然后失败),但它无论如何都能在Firefox中工作。

和 .bg3 不适用于Chrome和Firefox,因为两者都会尝试使用不固定的 radial-gradient(...) 并失败。

因此,解决方案是为未固定的值使用一个有效值。您可以替换 center center, circle contain 具有 circle closest-side at center center .

此外,由于您正在使用 var() ,这意味着你不需要使用 -moz径向梯度 或 -webkit径向梯度 不再通过检查 caniuse: "radial-gradient" 和 caniuse: "custom properties" ,我们可以看到 径向梯度 甚至早于 var (除了我们缺少一些不太常见的浏览器的“径向梯度”数据,在上面的链接中显示为灰色)

:root{
    --color2: 23;
}

.my_div{
    display: inline-block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    border: solid 1px;
    border-radius: 50%;
}

.bg4{
    background-image: radial-gradient(circle closest-side at center center, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}

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

(如果有人对“掩护”的情况感到好奇, center center, circle cover 应替换为 circle farthest-corner at center center )

cqb13 1 年前

: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%;
}

.bg_color {
  background-color: hsla(var(--color2), 100%, 56%, 1);
}

.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%, hsla(var(--color2), 100%, 56%, 1) 100%);
background-image: radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}

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