线性渐变仍然需要浏览器前缀吗？

Question

我还需要使用线性渐变属性的浏览器前缀吗？

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);

Answer 1

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

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

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

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

Answer 2

您现在可以使用：

linear-gradient

没有前缀，IE10 +以及当前版本的Safari，Chrome和Firefox都支持它。有关详细信息，请参阅： http://caniuse.com/#search=linear-gradient

但简短的回答是：不需要前缀。

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对象。因此，linear gradient更多地是SVG属性，需要除前缀之外的一些额外工作。