在做網(wǎng)頁設計時，如果要使用漸層的背景，通常會使用的做法是利用軟體將整個背景制作出來，例如左邊那樣，是做好之后再插入到網(wǎng)頁中的，現(xiàn)在新的CSS3出來了之后，可以直接使用語法就產(chǎn)生一模一樣的背景。
什么?你說你不知道CSS 3的語法嗎?沒關系，可以使用下面的網(wǎng)站，只要點一點拉一拉，他會自動生成個瀏覽器對應的CSS 3的語法，再直接套用就可以拉。
網(wǎng)站1：Ultimate CSS Gradient Generator
網(wǎng)站2：CSS Gradient Background Maker
不過...有點遺憾的事情是，到小編寫這篇文章為止，最新的IE 9.0，還是沒有辦法完整支援CSS 3的漸層效果，所以在產(chǎn)生的CSS 3的語法之后，可以利用之前提過的CSS HACK，讓IE系列的瀏覽器使用原本的方法呈現(xiàn)，不過從網(wǎng)站產(chǎn)生的語法注解中，看到了IE 10的蹤影，讓我們期待一下IE 10可以對CSS 3.0有更完整的支援。
左邊的是使用CSS的語法產(chǎn)生的，不過如果讀者你是用IE瀏覽器的話，恩你應該會看到一塊空白，這個是因為IE還沒有完全支援，請換個瀏覽器來看看，你就會看到有個用CSS 產(chǎn)生的漸層圓圈在旁邊的。
語法
/* IE10 */
background-image: -ms-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #00A3EF), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Proposed W3C Markup */
background-image: radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
這邊說明一下圓形語法，各個瀏覽器的語法稍稍有點不同，不過大致上如下面的規(guī)則：
radial-gradient( 圓心位置,形狀形狀參數(shù),顏色顏色停止位置,顏色顏色停止位置...)
- radial-gradient：表示要使用的是圓形漸層。
- 圓心位置：起始位置，例如上面的范例寫的是center，表示從div的中間開始，指定的方法就和一般我們在設定CSS background的方法一樣。
- 形狀：circle(正圓) | ellipse(橢圓) ，可省略，預設值是ellipse
- 形狀參數(shù)：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover，可省略，預設值是cover
- closest-side：漸變的半徑長度為從圓心到離圓心最近的邊。
- closest-corner：漸變的半徑長度為從圓心到離圓心最近的角。
- farthest-side：漸變的半徑長度為從圓心到離圓心最遠的邊。
- farthest-corner：漸變的半徑長度為從圓心到離圓心最遠的角。
- contain：包含，漸變的半徑長度為從圓心到離圓心最近的點。類似于closest-side。
- cover：覆蓋，漸變的半徑長度為從圓心到離圓心最遠的點。類似于farthest-corner。
- 顏色：顏色就如同本來CSS的指定顏色方法。
- 顏色停止位置：顏色停止的位置，可用長度或百分比顯示。
