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

　　### 線性顏色漸變

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

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

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

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

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

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

　　### 線性透明度漸變

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

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

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

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

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

　　### 徑向顏色漸變

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

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è)置一個以圓心為半徑，從紅到綠再到藍的圓形漸變。

　　### 徑向透明度漸變

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

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è)置一個圓形透明度漸變，從完全透明到不透明的紅色。

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