2013-04-05 124 views
1

我想要在Chrome中獲得橢圓漸變。我試過在Chrome中的CSS3橢圓漸變

background-image: 
    -webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))), 
    -webkit-gradient(linear, 50% 100%, 50% 0%, from(#0A6B9A), to(#29ABE2)); 

沒有運氣。我已經嘗試了一些我在網絡和某些書中發現的其他內容,但都只是失敗或者以圓圈出現。

它很容易通過火狐做的(對於那些有興趣涼爽的效果):

background-image: 
    -moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)), 
    -moz-linear-gradient(50% 100%, #0A6B9A, #29ABE2); 

這是可能的鍍鉻?根據我見過的梯度計劃的規格應該是可能的。也許Chrome尚未支持它。

**編輯 哦,我檢查,款式不被覆蓋或任何這樣的爵士樂

回答

1

-moz是Firefox的只是保留一個CSS屬性 - 這就是爲什麼它不能在Chrome中使用(和在任何其他瀏覽器中)。

更具體地說,每個以-開頭的CSS屬性都不是標準的,只適用於特定的瀏覽器。它僅用於兼容性。如果瀏覽器不理解屬性意味着什麼,它只是跳過它,這就是爲什麼在CSS文件中有多個屬性,並且-moz-webkit無法在任何地方工作(不僅適用於您)。

對於CSS3兼容的瀏覽器應該在W3C會議的語氣,像

background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); 

(顏色是不同的,只要注意background: radial-gradient(ellipse ...

您可以使用http://www.colorzilla.com/gradient-editor/或任何onther CSS梯度發生器這個,只需將方向設置爲徑向。

+0

甜,這是一個快速的反應。是的,我知道moz的事情,但感謝包括,如果我沒有。我能找到的所有文檔都看到,chrome只支持-webkit-gradient版本。猜猜這是舊信息。如果答案時間最短,我會接受你的答案。 – Poodimizer 2013-04-05 21:28:05