CSS3漸變功能使您可以創(chuàng)建從一種顏色到另一種顏色的漸變，而無(wú)需使用任何圖像。
CSS3漸變功能提供了一種靈活的解決方案，可以在兩種或多種顏色之間生成平滑的過渡。為了達(dá)到這種效果，我們不得不使用圖像。使用CSS3漸變可以減少下載時(shí)間并節(jié)省帶寬使用量。可以將漸變?cè)匕幢壤糯蠡蚩s小到任何程度，而不會(huì)降低質(zhì)量，并且輸出將更快地渲染，因?yàn)樗怯蔀g覽器生成的。
漸變有兩種樣式：線性 (linear)和徑向(radial)。
要?jiǎng)?chuàng)建線性漸變，您必須至少定義兩個(gè)色標(biāo)。但是，要?jiǎng)?chuàng)建更復(fù)雜的漸變效果，您可以定義更多的色標(biāo)。色標(biāo)是您要呈現(xiàn)平滑過渡的顏色。您還可以設(shè)置應(yīng)用漸變效果的起點(diǎn)和方向（或角度）。使用關(guān)鍵字創(chuàng)建線性漸變的基本語(yǔ)法可以通過以下方式給出：
linear-gradient(angle, color-stop1, color-stop2, ...)
以下示例將創(chuàng)建一個(gè)從上到下的線性漸變。這是默認(rèn)值。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}測(cè)試看看?/?以下示例將創(chuàng)建一個(gè)從左到右的線性漸變。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, red, yellow);
background: linear-gradient(to right, red, yellow);
}測(cè)試看看?/?您還可以沿對(duì)角線方向創(chuàng)建漸變。以下示例將創(chuàng)建一個(gè)從元素框的左下角到右上角的線性漸變。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(bottom left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(bottom left, red, yellow);
background: linear-gradient(to top right, red, yellow);
}測(cè)試看看?/?如果要進(jìn)一步指定漸變的方向，可以設(shè)置角度，而不是預(yù)定義的關(guān)鍵字。該角度0deg創(chuàng)建了從底部到頂部的漸變，正角度表示順時(shí)針旋轉(zhuǎn)，這意味著該角度90deg創(chuàng)建了從左到右的漸變。使用角度創(chuàng)建線性漸變的基本語(yǔ)法可以給出：
linear-gradient(angle, color-stop1, color-stop2, ...)
以下示例將使用角度從左到右創(chuàng)建線性漸變。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(0deg, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(0deg, red, yellow);
background: linear-gradient(90deg, red, yellow);
}測(cè)試看看?/?您還可以為兩種以上的顏色創(chuàng)建漸變。以下示例將向您展示如何使用多個(gè)色標(biāo)創(chuàng)建線性漸變。所有顏色均等分布。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow, lime);
background: linear-gradient(red, yellow, lime);
}測(cè)試看看?/?色標(biāo)是沿著漸變線的點(diǎn)，在該位置將具有特定顏色。色標(biāo)的位置可以指定為百分比或絕對(duì)長(zhǎng)度。您可以根據(jù)需要指定任意多個(gè)色標(biāo)，以達(dá)到所需的效果。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow 30%, lime 60%);
background: linear-gradient(red, yellow 30%, lime 60%);
}測(cè)試看看?/?注意：將顏色停止位置設(shè)置為百分比時(shí)，0%代表起點(diǎn)，而100%代表終點(diǎn)。但是，您可以使用超出該范圍的值，即在使用之前0%或之后100%獲得想要的效果。
您可以使用repeating-linear-gradient()函數(shù)重復(fù)線性漸變。
.gradient {
/* Fallback for browsers that don't support gradients */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
background: repeating-linear-gradient(black, white 10%, lime 20%);
}測(cè)試看看?/?在徑向漸變中，顏色從單個(gè)點(diǎn)出現(xiàn)，并以圓形或橢圓形形狀向外平滑散布，而不是像線性漸變那樣從一種顏色在單個(gè)方向上漸變?yōu)榱硪环N顏色。創(chuàng)建徑向漸變的基本語(yǔ)法可以通過以下方式給出：
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
該radial-gradient()函數(shù)的參數(shù)具有以下含義：
position —指定漸變的起點(diǎn)，可以以單位（px，em或百分比）或關(guān)鍵字（left，bottom等）指定漸變的起點(diǎn)。
shape —指定漸變的最終形狀的形狀。它可以是圓形或橢圓形。
size —指定漸變的最終形狀的大小。默認(rèn)值為farthest-side。
以下示例將顯示您創(chuàng)建帶有均勻間隔的色標(biāo)的徑向漸變。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(red, yellow, lime);
background: radial-gradient(red, yellow, lime);
}測(cè)試看看?/?radial-gradient()函數(shù)的shape參數(shù)用于定義徑向漸變的最終形狀。它可以取值 circle 或 ellipse。這是一個(gè)實(shí)例：
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(circle, red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(circle, red, yellow, lime);
background: radial-gradient(circle, red, yellow, lime);
}測(cè)試看看?/?注意：如果省略或未指定shape參數(shù)，如果大小為單個(gè)長(zhǎng)度，則結(jié)束形狀，默認(rèn)為圓形，否則為橢圓。
radial-gradient()函數(shù)的size參數(shù)用于定義漸變的最終形狀的大小。大小可以用單位或關(guān)鍵字進(jìn)行設(shè)置：closest-side，farthest-side，closest-corner，farthest-corner。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}測(cè)試看看?/?您也可以使用該repeating-radial-gradient()功能重復(fù)徑向漸變。
.gradient {
/* Fallback for browsers that don't support gradients */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
background: repeating-radial-gradient(black, white 10%, lime 20%);
}測(cè)試看看?/?CSS3漸變還支持透明度。堆疊多個(gè)背景時(shí)，你可以使用它來創(chuàng)建背景圖像的淡入效果。
.gradient {
/* Fallback for browsers that don't support gradients */
background: url("images/sky.jpg");
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}測(cè)試看看?/?