CSS3 渐变（Gradients）
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
语法
background-image: linear-gradient(direction, color1,color2,...);
从上到下（默认）
style="width: 300px; height: 200px; background-image: linear-gradient(red,yellow);"
从左到右
style="width: 300px; height: 200px; background-image: linear-gradient(to right,blue,yellow);"
对角
style="width: 300px; height: 200px; background-image: linear-gradient(to right bottom,green,purple);"
自定义角度
style="width: 300px; height: 200px; background-image: linear-gradient(90deg,green,purple);"
参考角度（有的浏览器可能不同）
使用多个颜色结点
style="width: 200px; height: 100px; background-image: linear-gradient(red,yellow,green);"
还可以控制各种颜色占比：
style="width: 200px; height: 100px; background-image: linear-gradient(red 10%,yellow 20%,green 70%);"
使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
代码：
style="width:200px;height:100px;background-image:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));"
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
代码：
style="width: 200px; height: 100px; background-image: repeating-linear-gradient(red,yellow 10%,green 20%);"
CSS3 径向渐变
径向渐变由它的中心定义。
代码：
style="width: 200px; height: 150px; background-image: radial-gradient(circle,red,yellow,green);"
注：circle可以不写，默认为ellipse，根据盒模型比例渐变，如下
也可以用百分比设置各种颜色所占比例
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);