CSS Future Proof Linear Gradient

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 选项；尽管它们不太好）。