CSS颜色渐变是使颜色之间的过渡更加平稳。
1、渐变的方式有两类：
线性（Liner Gradients）、圆形（Radial Gradients）
2、基本语法：
1 background: linear-gradient(渐变的方向,渐变的颜色1,渐变的颜色2,渐变的颜色3,...);
1 background: radial-gradient(渐变的方向,渐变的颜色1,渐变的颜色2,渐变的颜色3,...);
3、
1)、线性：
代码：
1 <div> 2 <h5 style="text-align: center">线性渐变</h5> 3 <p>从上到下</p> 4 <div style="width: 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div> 5 <p>从左到右</p> 6 <div style="width: 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div> 7 <p>对角线(左上到右下)</p> 8 <div style="width: 200px;height: 200px;background: linear-gradient(to bottom right,red,blue)"></div> 9 </div>
效果图：
2)、圆形：
代码：
1 <div> 2 <h5 style="text-align: center">线性渐变</h5> 3 <p>椭圆形</p> 4 <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red,blue);"></div> 5 <p>圆形</p> 6 <div style="width: 200px;height: 200px;background: radial-gradient(circle,red,orange,yellow,blue);"></div> 7 <p>椭圆形(多色)</p> 8 <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red,orange,yellow,green,blue,purple)"></div> 9 <p>颜色不均匀分布</p> 10 <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red 10%,orange 20%,yellow 30%,green 40%)"></div> 11 </div>
效果图：
--------------------------------------------------------
更多细节可以参考css3渐变教程：http://www.runoob.com/css3/css3-gradients.html