實現跨瀏覽器漸變的CSS前綴

我希望能夠實現跨瀏覽器漸變，如果您檢查右上角的定位點與我的移動網站的品牌標識內嵌，則它已使用前綴moz for Firefox ：實現跨瀏覽器漸變的CSS前綴

www.test-bed.co.uk/mobile/

background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;

請問是有一個類似的方式實現了與IE，Opera和WebKit的前綴一個跨瀏覽器的梯度溶液？

來源

2012-09-03 user1554264

你需要根據你也應該看看[指南針]（http://compass-style.org/）和at [prefix-free]（http://leaverou.github.com/prefixfree/） –

一個在線工具，可以自動爲所有現代瀏覽器生成CSS漸變規則：little link。

不過一般，這裏的主要語法：

background: #color; /*fallback*/ 
background: -moz-linear-gradient(...);/*Firefox*/ 
background: -webkit-gradient(...);/*Chrome + Safari*/ 
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/ 
background: -o-linear-gradient(...); /*Opera*/ 
background: -ms-linear-gradient(...); /*IE10+*/ 
background: linear-gradient(...); /*W3C standards*/ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/

來源

2012-09-03 19:29:43 Chris

在CSS3 Please看看。我個人喜歡他們的縮進風格。

.box-gradient { 
    background-color: #444444; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */ 
    background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */ 
    background-image:  -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */ 
    background-image:   linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */ 
}

正如你所看到的，有因爲IE10 supports the W3C syntax就不需要-ms-前綴。請確保您使用correct W3C syntax爲linear-gradient()！

來源

2012-09-03 19:50:42 Dreamseer

如果您使用Firefox作爲瀏覽器。那麼你可能想使用名爲colorzilla的插件。這是一個很好的工具，帶有諸如顏色選擇器，滴管，Pallette瀏覽器，CSS漸變發生器，網頁DOM代碼分析器，檢查最後一個元素以及縮放。

但是你可以發電機的CSS gradient'sat的folllowing鏈接：

http://www.colorzilla.com/gradient-editor/

來源

2012-09-03 20:15:00 defau1t

實現跨瀏覽器漸變的CSS前綴

回答

相關問題