在做網(wǎng)頁(yè)設(shè)計(jì)時(shí)，如果要使用漸層的背景，通常會(huì)使用的做法是利用軟體將整個(gè)背景制作出來(lái)，例如左邊那樣，是做好之后再插入到網(wǎng)頁(yè)中的，現(xiàn)在新的CSS3出來(lái)了之后，可以直接使用語(yǔ)法就產(chǎn)生一模一樣的背景。
什么?你說(shuō)你不知道CSS 3的語(yǔ)法嗎?沒(méi)關(guān)系，可以使用下面的網(wǎng)站，只要點(diǎn)一點(diǎn)拉一拉，他會(huì)自動(dòng)生成個(gè)瀏覽器對(duì)應(yīng)的CSS 3的語(yǔ)法，再直接套用就可以拉。
網(wǎng)站1：Ultimate CSS Gradient Generator
網(wǎng)站2：CSS Gradient Background Maker
不過(guò)...有點(diǎn)遺憾的事情是，到小編寫(xiě)這篇文章為止，最新的IE 9.0，還是沒(méi)有辦法完整支援CSS 3的漸層效果，所以在產(chǎn)生的CSS 3的語(yǔ)法之后，可以利用之前提過(guò)的CSS HACK，讓IE系列的瀏覽器使用原本的方法呈現(xiàn)，不過(guò)從網(wǎng)站產(chǎn)生的語(yǔ)法注解中，看到了IE 10的蹤影，讓我們期待一下IE 10可以對(duì)CSS 3.0有更完整的支援。
左邊的是使用CSS的語(yǔ)法產(chǎn)生的，不過(guò)如果讀者你是用IE瀏覽器的話(huà)，恩你應(yīng)該會(huì)看到一塊空白，這個(gè)是因?yàn)镮E還沒(méi)有完全支援，請(qǐng)換個(gè)瀏覽器來(lái)看看，你就會(huì)看到有個(gè)用CSS 產(chǎn)生的漸層圓圈在旁邊的。
語(yǔ)法
/* 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%);
這邊說(shuō)明一下圓形語(yǔ)法，各個(gè)瀏覽器的語(yǔ)法稍稍有點(diǎn)不同，不過(guò)大致上如下面的規(guī)則：
radial-gradient( 圓心位置,形狀形狀參數(shù),顏色顏色停止位置,顏色顏色停止位置...)
- radial-gradient：表示要使用的是圓形漸層。
- 圓心位置：起始位置，例如上面的范例寫(xiě)的是center，表示從div的中間開(kāi)始，指定的方法就和一般我們?cè)谠O(shè)定CSS background的方法一樣。
- 形狀：circle(正圓) | ellipse(橢圓) ，可省略，預(yù)設(shè)值是ellipse
- 形狀參數(shù)：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover，可省略，預(yù)設(shè)值是cover
- closest-side：漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊。
- closest-corner：漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角。
- farthest-side：漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊。
- farthest-corner：漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角。
- contain：包含，漸變的半徑長(zhǎng)度為從圓心到離圓心最近的點(diǎn)。類(lèi)似于closest-side。
- cover：覆蓋，漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的點(diǎn)。類(lèi)似于farthest-corner。
- 顏色：顏色就如同本來(lái)CSS的指定顏色方法。
- 顏色停止位置：顏色停止的位置，可用長(zhǎng)度或百分比顯示。
