2012-03-03 69 views
13

我還需要爲線性漸變屬性使用瀏覽器前綴嗎?線性漸變還需要瀏覽器前綴嗎?

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

不是很明顯的答案嗎? – BoltClock 2012-03-03 20:11:46

+0

http://caniuse.com/css-gradients – 2012-03-03 20:12:29

+0

可能的重複[如何才能找到我何時可以放棄CSS3屬性的供應商前綴?](http://stackoverflow.com/questions/9211602/how-當我可以安全地丟棄供應商前綴爲css3屬性)和[我們必須使用非標準/瀏覽器特定的CSS供應商前綴了嗎?]( http://stackoverflow.com/questions/9401830/do-we-have-to-use-non-standard-browser-specific-css-anymore)(加上一些類似的問題鏈接在那裏) – BoltClock 2012-03-03 20:14:43

回答

8

根據Can I use,截至6月2017,互聯網使用的93.75%,是在支持無前綴線性漸變(美國97.2%)的瀏覽器。對於大多數人來說,這意味着你不需要爲你的漸變添加前綴。

enter image description here

以下是最常見的桌面瀏覽器的第一個兼容的版本和發行日期:

  • IE V10,2012
  • 火狐V16,發佈2012年8月
  • 鉻九月發佈v26,2013年2月發佈
  • Safari v6.1 2013年10月發佈
  • 2012年11月發佈的Opera 12.1

有關其他瀏覽器(包括移動瀏覽器)兼容性歷史記錄的信息,請訪問Can I use

0

以下示例

 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屬性,它需要一些超出前綴的額外工作。

7

您現在可以使用:

linear-gradient 

沒有前綴,它會通過IE10 +以及Safari瀏覽器,Chrome瀏覽器和Firefox的最新版本的支持。欲瞭解更多詳細信息,請參閱: http://caniuse.com/#search=linear-gradient

但簡短的答案是:無需前綴。