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专家，但我注意到所有这些都是前缀。添加无前缀的版本也是明智的吗？它会是什么？

Answer 1

添加无前缀的版本也是明智的吗？

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

它会是什么？

在渐变的情况下，您拥有的版本与标准相同;只需删除前缀。

但请注意，还有一个早期的渐变webkit语法变体，如果你想支持旧的webkit浏览器，你可能还需要指定。

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

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

如果你想真正实现跨浏览器兼容，你可能还会注意到IE9及更早版本根本不支持CSS渐变（带或不带前缀）。普通颜色后备将起作用，但如果你想要一个渐变，则有其他解决方案（我的首选选项通常是CSS3Pie，但如果您愿意，还有纯CSS选项;但它们并不好看。） / p>

Answer 2

未加前缀的W3C标准，名称为linear-gradient。

Answer 3

我一直在使用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%);

Answer 4

为了将来证明线性渐变只是在现有代码的末尾添加：

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

当浏览器删除前缀时，它仍然可以使用通用代码。

CSS Future Proof Linear Gradient

4 个答案: