CSS3的渐变（Gradients）

渐变

css3渐变可以实现多种颜色之间的过渡

线性渐变

单一方向渐变：线性渐变默认是从上到下的渐变
（1）从左到右的渐变background: -webkit-linear-gradient(left,red,yellow,pink);或者background: linear-gradient(to right,red,yellow,pink);可实现的效果图展示如下：
（2）从右向左的渐变background: -webkit-linear-gradient(right,red,yellow,pink);或者background: linear-gradient(to left,red,yellow,pink);可实现的效果图展示如下：
（3）从下到上的渐变background: -webkit-linear-gradient(bottom,red,yellow,pink);或者background: linear-gradient(to top,red,yellow,pink);可实现的效果图展示如下：
（4）从上到下的渐变background: -webkit-linear-gradient(top,red,yellow,pink);或者background: linear-gradient(to bottom,red,yellow,pink);可实现的效果图展示如下：
对角渐变
（1）从右上角向其对角方向渐变background: -webkit-linear-gradient(right top,blue,yellow,green);或者background: linear-gradient(to left bottom,blue,yellow,green);可实现的效果图展示如下：
（2）从左上角向其对角方向渐变background: -webkit-linear-gradient(left top,blue,yellow,green);或者background: linear-gradient(to right bottom,blue,yellow,green);可实现的效果图展示如下：
（3）从右下角向其对角方向渐变background: -webkit-linear-gradient(right bottom,blue,yellow,green);或者background: linear-gradient(to left top,blue,yellow,green);可实现的效果图展示如下：
（4）从左下角向其对角方向渐变background: -webkit-linear-gradient(left bottom,blue,yellow,green);或者background: linear-gradient(to right top,blue,yellow,green);可实现的效果图展示如下：
角度渐变:角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。
（1）10deg的角度渐变background: -webkit-linear-gradient(10deg,blue,yellow,green);可实现的效果图展示如下：
（2）0deg的角度渐变background: -webkit-linear-gradient(0deg,blue,yellow,green);可实现的效果图展示如下：
（3）90deg的角度渐变background: -webkit-linear-gradient(90deg,blue,yellow,green);可实现的效果图展示如下：
重复性线性渐变background: repeating-linear-gradient(red, yellow 10%, green 20%);可实现的效果图展示如下：

径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变，默认是从中心开始向四周渐变。
（1）从中心开始向四周渐变background: -webkit-radial-gradient(yellow,red,blue);可实现的效果图展示如下：
给颜色设置百分比background: -webkit-radial-gradient(yellow 10%,red 50%,#000 70%,blue);可实现的效果图展示如下：
（2）从左边到四周的渐变background: -webkit-radial-gradient(left,yellow,red,blue);可实现的效果图展示如下：
（3）重复性径向渐变background: repeating-radial-gradient(red, yellow 10%, green 20%);可实现的效果图展示如下：
（4）设置渐变形状，circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: radial-gradient(circle, red 20%, yellow 50%, green 70%,#000);
			}

可实现的效果图展示如下：

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: radial-gradient(ellipse, red 20%, yellow 50%, green 70%,#000);
			}

可实现的效果图展示如下：

（5）设置渐变的尺寸，size：渐变的大小，即渐变到哪里停止，它有四个值：
closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角。

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: -webkit-radial-gradient(60% 40%, closest-side, blue, green, yellow, black);
			}

最近边实现的效果图展示如下：

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: -webkit-radial-gradient(60% 40%, farthest-side, blue, green, yellow, black);
			}

最远边实现的效果图展示如下：

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: -webkit-radial-gradient(60% 40%, closest-corner, blue, green, yellow, black);
			}

最近角实现的效果图展示如下：

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: -webkit-radial-gradient(60% 40%,farthest-corner, blue, green, yellow, black);
			}

最远角实现的效果图展示如下：
（6）设置多颜色节点均匀分布实现渐变

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: -webkit-radial-gradient(center, farthest-corner, gold, pink, red);
			}

实现的效果图展示如下：

.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: -webkit-radial-gradient(50% 50%,farthest-corner, gold, pink, red);
			}

实现的效果图展示如下：