不同浏览器的CSS3线性梯度问题

Question

我正在尝试为div添加一个透明的线性渐变，使其在不同的浏览器中工作似乎并不那么容易。

background-image:-moz-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-webkit-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-o-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-ms-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image: linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);

这在任何浏览器中都不起作用。如果我删除除-moz-linear-gradient之外的所有行，它在Firefox中有效。为什么？

错误消息为"属性值无效"。但由于它只适用于所提供的-moz-供应商，我认为价值应该是好的？

Answer 1

它们不起作用，因为除了-moz-linear-gradient语法之外的所有内容都不正确。下面的代码段提供了其他语法的正确语法，供您参考。(用$secondary颜色替换红色。)

• -webkit-linear-gradient语法支持双边语法，但看起来center不是允许的值。因此，例如，left top或left bottom作为第一个参数将导致对角线梯度，但left center不产生输出
• 标准的linear-gradient属性不使用side side作为第一个参数。它使用to [side] [side]作为第一个参数。因此，对角线梯度to将类似于to left top或to left bottom，而水平梯度将是to left或to right

即使根据MDN，center也不是-moz-linear-gradient函数的有效值，因此Firefox能够使用该值也令人惊讶。也许，它只是忽略无效值，而其他浏览器则忽略整个属性+值。

-moz线性渐变([[[top|bottom]||[left|right]]，]？<彩色停止>[，<色彩停止>]+)；

body{
min-height: 100vh;
background-image: -webkit-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%);
background-image: -moz-linear-gradient(left center, red, rgba(255, 82, 66, 0) 52%);
background-image: -o-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%);
background-image: linear-gradient(to right, red, rgba(255, 82, 66, 0) 52%);
}