当我们设置页面的时候为了美观，在显示出来的页面颜色会从一中颜色过渡到另一种颜色，这就需要用CSS3的渐变来实现啦;
以前，我们总是通过插入图片的方法来实现这些效果，现在，通过使用CSS3渐变（gradients）实现，这样渐变的效果看起来效果更好啦。
CSS3渐变（Gradients）：渐变的类型有两种：线性渐变和径向渐变;
1、线性渐变（Linear Gradients）：包括向下，向上，向左，向右还有对角方向的渐变;
语法：
background:linear-gradient(direction,color-stop1,color-stop2,.....);
参数： direction---规定渐变的方向，默认情况为：由上往下渐变;
color-stop1---开始的颜色;
color-stop2，.......---过渡的颜色；
先面以从左到右渐变为例，实现从左边开始的线性渐变，起点为蓝色，慢慢过渡到红色：
<style>
#grad {
background: linear-gradient(to right, to right, red,orange,yellow,green,blue,indigo,violet);
}
</style>
<body>
<div id="grad"></div>
</body>
2、使用角度现实渐变：好处就是在渐变的方向上可以有更多的控制;
语法：
background: linear-gradient(angle, color-stop1, color-stop2);
参数：angle----角度：指水平线和渐变线之间的角度，逆时针方向计算；
如下实现不同的角度的渐变：
<style>
#grad1 {
background: linear-gradient(0deg, red, blue);
}
#grad2 {
background: linear-gradient(90deg, red, blue);
#grad3 {
background: linear-gradient(180deg, red, blue);
}
#grad4 {
background: linear-gradient(-90deg, red, blue);*/
}
</style>
<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>
3、使用透明度实现渐变（Transparency）：可以减弱变淡的效果而添加透明度，使用rgba（）函数来定义颜色的节点;
如下例子：
<style>
#grad {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
<body>
<div id="grad"></div>
</body>
上述代码中： rgba（）函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明渡：0表示完全透明，1表示完全不透明;
4.径向渐变（Radial Gradients）：有由他们的中心定义;
语法：
background: radial-gradient(center, shape size, start-color, ..., last-color);
参数：center---默认情况下是由中心渐变;
shape size---默认情况下是圆形的;
start-color：渐变开始的颜色;
start-color：渐变结束的颜色;
如下例子：径向渐变--颜色结点不均匀分布;
<style>
#grad {
background: radial-gradient(ellipae， red 5%, green 15%, blue 60%);
}
</style>
<body>
<div id="grad"></div>
</body>