CSS3中的漸變(Gradient)屬性可以讓我們用平滑的顏色過(guò)渡實(shí)現(xiàn)多彩背景的效果。漸變屬性分為線性漸變和徑向漸變，每種漸變又分為顏色漸變和透明度漸變。

　　### 線性顏色漸變

　　線性顏色漸變由起點(diǎn)、終點(diǎn)和中間點(diǎn)顏色組成。通過(guò)定義起點(diǎn)、終點(diǎn)和中間點(diǎn)顏色，可以實(shí)現(xiàn)從一種顏色過(guò)渡到下一種顏色的效果。語(yǔ)法如下：

background: linear-gradient(direction, color-stop1, color-stop2, .....)

      其中，direction表示漸變方向，可以為to left、to right、to top、to bottom，也可以指定角度。

　　color-stop表示顏色的停止點(diǎn)，可以設(shè)置多個(gè)顏色停止點(diǎn)。例如：

div {
  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
}

      上述代碼表示設(shè)置一條從左到右的漸變線，分別從紅到綠再到藍(lán)。

　　### 線性透明度漸變

　　線性透明度漸變與顏色漸變類似，可以設(shè)置漸變的起點(diǎn)、終點(diǎn)和顏色。但其顏色值可以帶有透明度值。語(yǔ)法如下：

background: linear-gradient(direction, rgba(color1, opacity1), rgba(color2, opacity2), .....)

      其中，opacity表示不透明度，可以為0到1之間的小數(shù)。例如：

div {
  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
}

      上述代碼表示設(shè)置一條從左到右的透明度漸變，從完全透明到不透明的紅色。

　　### 徑向顏色漸變

　　徑向漸變是以一個(gè)圓心為半徑，向外輻射狀的顏色漸變。可以設(shè)置起點(diǎn)、終點(diǎn)和中間點(diǎn)顏色，實(shí)現(xiàn)從一種顏色過(guò)渡到下一種顏色的效果。語(yǔ)法如下：

background: radial-gradient(shape size at position, start-color, ..., last-color);

     其中，shape是漸變形狀，可以是circle或ellipse，size表示漸變大小，可以是closest-side、closest-corner等值，at position表示漸變位置，可以是數(shù)值或方向。例如：

div {
  background: radial-gradient(ellipse at center, #ff0000, #00ff00, #0000ff);
}

      上述代碼表示設(shè)置一個(gè)以圓心為半徑，從紅到綠再到藍(lán)的圓形漸變。

　　### 徑向透明度漸變

　　徑向透明度漸變與顏色漸變類似，可以設(shè)置漸變的起點(diǎn)、終點(diǎn)和顏色。但其顏色值可以帶有透明度值。語(yǔ)法如下：

background: radial-gradient(shape size at position, rgba(start-color, opacity1), ..., rgba(last-color, opacityn));

      例如：

div {
  background: radial-gradient(circle, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

      上述代碼表示設(shè)置一個(gè)圓形透明度漸變，從完全透明到不透明的紅色。

　　總之，CSS3中的漸變屬性可以讓頁(yè)面變得更加鮮明多彩，用好了可以增加頁(yè)面的美感和觀賞性。