(1)、什麼是漸變:

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。

(2)、CSS3漸變的分類

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

徑向漸變（cGradients）- 由它們的中心定義

(3)、CSS3 線性漸變

1、從上到下

下面的例項演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：

#grad { background-image: linear-gradient(#e66465, #9198e5); }

2、從左到右

下面的例項演示了從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：

#grad { 

height: 200px; background
 
-image: linear-gradient(to right, red , yellow);

}

3、對角

下面的例項演示了從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：

#grad {

        height: 200px; background-image: linear-gradient(to bottom right, red, yellow);

}

4、對角使用多個顏色結點

帶有多個顏色結點的從上到下的線性漸變：

#grad { background-image: linear-gradient(red, yellow, green); }

5、使用透明度（

CSS3 漸變也支援透明度（transparent），可用於建立減弱變淡的效果。

#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

(4)、CSS3 徑向漸變

徑向漸變由它的中心定義。

1、顏色結點均勻分佈（預設情況下）

#grad { background-image: radial-gradient(red, yellow, green); }

2、顏色結點不均勻分佈

#grad { background-image: radial-gradient(red 5
 
%, yellow 15%, green 60%); }

3、設定形狀

shape 引數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。預設值是 ellipse。

#grad { background-image: radial-gradient(circle, red, yellow, green); }