CSS 未来证明线性渐变答案

【问题标题】：CSS Future Proof Linear GradientCSS 未来证明线性渐变
【发布时间】：2013-06-10 12:21:00
【问题描述】：

我在网上有以下代码：

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

【问题讨论】：

标签： css gradient linear-gradients

【解决方案1】：

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

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

会是什么？

在渐变的情况下，您拥有的版本与标准相同；去掉前缀就行了。

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

和语法一样吗？使用安全吗？
@nute：取决于“标准”这个词对你意味着什么。

【解决方案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%);

【讨论】：

【解决方案4】：

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

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

这样，当浏览器去掉前缀时，它仍然可以使用通用代码。

【讨论】：