CSS颜色渐变是使颜色之间的过渡更加平稳。

1、渐变的方式有两类：

     线性（Liner Gradients）、圆形（Radial Gradients）

2、基本语法：

     background: linear-gradient(渐变的方向,渐变的颜色1,渐变的颜色2,渐变的颜色3,...); 

     background: radial-gradient(渐变的方向,渐变的颜色1,渐变的颜色2,渐变的颜色3,...); 

3、

1)、线性：

代码：

1 
     
      2     
      
线性渐变
3     
      
从上到下
4     
      
5     
      
从左到右
6     
      
7     
      
对角线(左上到右下)
8     
      
9 
     

效果图：

2)、圆形：

代码：

1 
     
       2     
      
线性渐变
 3     
      
椭圆形
 4     
      
 5     
      
圆形
 6     
      
 7     
      
椭圆形(多色)
 8     
      
 9     
      
颜色不均匀分布
10     
      
11 
     

效果图：

--------------------------------------------------------

更多细节可以参考css3渐变教程：http://www.runoob.com/css3/css3-gradients.html