CSS 未来兼容性线性渐变

Question

我在网上找到了以下代码：

  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

这可以正常工作。

我不是CSS专家，但我注意到所有这些都带有前缀。添加一个没有前缀的版本是否明智？它会是什么？

- Nathan H

Answer 1

是否明智添加无前缀版本？

是的，您应该始终提供任何已使用的有前缀CSS代码的非前缀版本。

对于渐变，您拥有的版本与标准相同；只需删除前缀即可。

但请注意，早期的webkit渐变语法也存在一种变体，如果要支持旧的webkit浏览器，您可能还需要指定该变体。

您还应为不受支持的浏览器包含纯色背景作为后备。

如果对这些事情有任何疑问，请咨询CanIUse或MDN等网站。

如果你想要真正实现跨浏览器兼容，你可能会注意到IE9及更早版本根本不支持CSS渐变（无论是否带前缀）。纯色回退将起作用，但如果你想要一个渐变，有替代方案（我通常偏爱CSS3Pie，但如果你喜欢，也有纯CSS选项；它们不太好看）。

- Spudley

Answer 2

我总是使用Ultimate CSS Gradient Generator。它完美地运作。

你的例子将会得到：

background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%);

- Le_Morri

Answer 3

为了使线性渐变具备未来的兼容性，只需在现有代码的末尾添加以下内容：

background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

就像这样，当浏览器删除前缀时，它仍然能够使用通用代码。

- Pete D

Answer 4

无前缀的W3C标准名称为linear-gradient。

- David Hedlund

---

语法一样吗？使用安全吗？ - Nathan H

@nute：这取决于你对“标准”一词的理解。 - BoltClock