即使使用“to bottom”，线性渐变也无法在firefox中运行

Question

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

当我在Firefox中使用它并进行检查时，识别的行是-webkit-。 它不适用于“to”：

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))

Answer 1

这是因为CSS从上到下（大多数情况下），这意味着-webkit-行（在Firefox接受它的意义上有效），覆盖-moz- 和正常（非前缀）样式。

您需要确保-webkit-高于-moz-，并且这两者都必须高于正常风格。

您的代码必须是：

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));

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

div {
  width: 200px;
  height: 200px;
  background-image: -webkit-linear-gradient(left top, #ffffff, #000000);
  background-image: -moz-linear-gradient(left top, #ffffff, #000000);
  background-image: -o-linear-gradient(left top, #ffffff, #000000);
  background-image: linear-gradient(left top, #ffffff, #000000);
}

<div></div>

Answer 2

使用跨浏览器兼容性支持

的线性渐变

.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 */
 }