浏览器前缀在 linear-gradient 中是否仍然需要？

Question

线性渐变属性(linear-gradient)还需要使用浏览器前缀吗?

background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
    background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
    background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);

我只希望支持最新的浏览器版本。我尝试了以下方法，但没有成功。

background-image:    linear-gradient(top, #2F2727, #1a82f7);

- user1117313

---

那么，答案不是显而易见吗？ - BoltClock

http://caniuse.com/css-gradients - James Montagne

可能是如何确定可以安全地删除CSS3属性的供应商前缀？和我们是否仍需使用非标准/特定于浏览器的CSS供应商前缀？（以及其中链接的一些类似问题）的重复。 - BoltClock

@BoltClock，嗯，我认为新浏览器可能会有一些语法变化。 - user1117313

因为这些是新的，它们没有通过W3验证...真是太痛苦了。 - user656925

例子中的问题在于它使用了旧语法，这仅适用于前缀（至少在chrome中是这样）。因此，应该使用“to bottom”而不是“top”，这是新的语法，可以在没有前缀的情况下工作。 - user559533

Answer 1

根据 Can I use 的数据，在2017年6月，93.75%的互联网用户使用不需要前缀的线性渐变浏览器（在美国为97.2%）。对于大多数人来说，这意味着您不再需要添加前缀。

以下是最常见的桌面浏览器的第一个兼容版本和发布日期:

• IE v10，发布于2012年9月
• Firefox v16，发布于2012年8月
• Chrome v26，发布于2013年2月
• Safari v6.1，发布于2013年10月
• Opera 12.1，发布于2012年11月

有关其他浏览器（包括移动浏览器）的兼容历史信息，请访问Can I use。

- Mohsen

Answer 2

现在你可以使用:

linear-gradient

没有前缀的线性渐变将被IE10+以及当前版本的Safari、Chrome和Firefox支持。更详细的信息请参见： http://caniuse.com/#search=linear-gradient 但简短的答案是：不需要前缀。

- Jeremy Knight

Answer 3

以下是示例

     background: rgb(238,238,238); /* Old browsers */
     background: -moz-linear-gradient(-45deg,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
     background: linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

显示线性渐变不仅仅是简单的前缀。例如，在IE上运行的那个需要一个前缀和DXImageTransform对象。因此，线性渐变更多地是一个需要超出前缀的额外工作的SVG属性。

- jmishra