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-color. 替换红色）

-webkit-linear-gradient 语法支持两侧语法，但看起来 center 不是允许的值。因此，例如，left top 或 left bottom 作为第一个参数将导致对角渐变，但 left center 不会产生任何输出。
标准 linear-gradient 属性不使用 side side 作为第一个参数。它使用 to [side] [side] 作为第一个参数。因此，对角线渐变为 to left top 或 to left bottom 而水平渐变为 to left 或 to right.

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

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

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

CSS3 不同浏览器的线性渐变问题

CSS3 linear-gradient issues with different browsers

css

linear-gradients