使用CSS3漸變的大塊

用CSS3徑向漸變實現良好性能的大塊有什麼方法嗎？喜歡這個網站。 http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg（3200x1600）使用CSS3漸變的大塊

帆布 - 圖像生成期間塊JS，並創建一個超時。

CSS3 - FF 13過大坡度（3200x1600），當加入該gradiend超載，對於一個標籤，甚至簡單的CSS3過渡得非常緩慢。

SVG - 過低的經驗，不測試太多，形象是低質量，然後CSS3

VML - 用於IE，沒有經驗

我提到了爲Chrome添加具有徑向這麼大的塊CSS3漸變，表現不錯。

你知道任何disering技術CSS3或帆布，使徑向漸變不可見的輻射線？

我會明白，如果你能提供一些示例鏈接。

謝謝！

來源

2012-08-07 Rantiev

這就是我想出來的。還沒有嘗試過一個巨大的塊上還沒有，但在這其中，我看不出有什麼明顯的放射狀線：

HTML：

<div id="gradient_div"></div>

CSS：

#gradient_div { 
    margin: 0 auto; 
    border-radius: 20px; 
    width: 500px; 
    height: 500px;  
    background-color:rgba(171, 171, 171, 0.1); 
    background-image: -moz-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%); 
    background-image: -webkit-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%); 
    background-image: -o-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%); 
    background-image: -ms-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%); 
    background-image: radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%); 
}

這裏你可以四處亂用的jsfiddle版本：http://jsfiddle.net/Hz8ME/

來源

2012-08-13 16:12:47 Lodder

Herer你會看到）））http://jsfiddle.net/Hz8ME/ 1 /如果不嘗試在不同程度上看到顯示。我剛剛製作了塊1500x1500px – Rantiev 2012-10-04 16:51:01

我們仍然需要非常小心地使用CSS3，瀏覽器仍然太難看（我在使用css3時看到越來越多的chrome bug。 – Rantiev 2012-10-04 16:52:34

使用CSS3漸變的大塊

回答

相關問題