CSS颜色渐变

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=" 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div>
5     <p>从左到右</p>
6     <div style=" 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div>
7     <p>对角线(左上到右下)</p>
8     <div style=" 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=" 200px;height: 200px;background: radial-gradient(ellipse,red,blue);"></div>
 5     <p>圆形</p>
 6     <div style=" 200px;height: 200px;background: radial-gradient(circle,red,orange,yellow,blue);"></div>
 7     <p>椭圆形(多色)</p>
 8     <div style=" 200px;height: 200px;background: radial-gradient(ellipse,red,orange,yellow,green,blue,purple)"></div>
 9     <p>颜色不均匀分布</p>
10     <div style=" 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