线性渐变是否仍需要浏览器前缀？ [复制]

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

您现在可以使用：

linear-gradient

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

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

Answer 2

根据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。

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 属性，除了前缀之外还需要一些额外的工作。