Css 线性渐变在firefox中不起作用，即使使用；“见底”；

当我在Firefox中使用它并检查时，识别出的行是

-webkit-

。 它不适用于“to”：

背景图像：-moz线性渐变（到右下角，var（--fGrad），var（--sGrad））

背景图像：-webkit线性渐变（至右下角，var（--fGrad），var（--sGrad））

这是因为CSS是自上而下的（在大多数情况下），这意味着

-webkit-

行（在Firefox接受它的意义上是有效的）重写了-moz-和正常（无前缀）样式

您需要确保

-webkit-

高于

-moz-

，并且两者都需要高于正常样式

您的代码需要：

background-image: -moz-linear-gradient(to right bottom,var(--fGrad),var(--sGrad));<br>
background-image: -webkit-linear-gradient(to right bottom,var(--fGrad),var(--sGrad))

因为我不知道您正在使用什么作为预处理器，下面是一个代码片段（变量已替换为实际十六进制值）

div{
宽度：200px；
高度：200px；
背景图像：-webkit线性渐变（左上，#ffffff，#000000）；
背景图像：-moz线性渐变（左上，#ffffff，#000000）；
背景图像：-o-线性梯度（左上，#ffffff，#000000）；
背景图像：线性渐变（左上，#ffffff，#000000）；
}

支持跨浏览器兼容性的线性渐变

background-image: -webkit-linear-gradient(left top,var(--fGrad),var(--sGrad));
background-image: -moz-linear-gradient(left top,var(--fGrad),var(--sGrad));
background-image: -o-linear-gradient(left top,var(--fGrad),var(--sGrad));
background-image: linear-gradient(left top,var(--fGrad),var(--sGrad));

---

你使用的是什么环境？@SimonSchnell你指的是什么类型的环境我试过：

背景图像：-moz线性渐变（到右下角，红色，绿色）；背景图像：-webkit线性渐变（到右下角，红色，绿色）

和-moz-line在我的firefox中使用。我有50.1.0版。你确定你的变量输出正确吗？考虑到
只是一个输入错误。我做了，但知道它在chrome和firefox中都不起作用，我真的很抱歉confused@KavianRabbani您使用什么作为CSS的预处理器？它是否在

var（--fGrad）

和

var（--sGrad）

中输入了正确的值？我刚买了一本书，它对我很管用。将生成的代码添加到我的答案中。

background-image: -webkit-linear-gradient(left top,var(--fGrad),var(--sGrad));
background-image: -moz-linear-gradient(left top,var(--fGrad),var(--sGrad));
background-image: -o-linear-gradient(left top,var(--fGrad),var(--sGrad));
background-image: linear-gradient(left top,var(--fGrad),var(--sGrad));

.class_name{
     background: #cdeb8e; /* Old browsers */
     background: -moz-linear-gradient(left,  #cdeb8e 0%, #a5c956 100%); /*  FF3.6-15 */
     background: -webkit-linear-gradient(left,  #cdeb8e 0%,#a5c956 100%); /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to right,  #cdeb8e 0%,#a5c956 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=1 ); /* IE6-9 */
 }