渐变背景
CSS3渐变让你显示两个或多个指定的颜色之间的平滑过渡。
此前，您必须使用图像，这些影响。 但是，通过使用CSS3渐变可以减少下载时间和带宽使用。 此外，放大时与渐变元件更好看，因为是由浏览器所生成的梯度。
CSS3定义了两种类型的渐变：
- 线性渐变（下降/上/左/右/对角线）
- 径向梯度（通过它们的中心定义）
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-, -moz- ，或-o-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3线性渐变
要创建必须限定至少两个色标线性渐变。 色标要渲染之间平滑过渡的颜色。 还可以设置一个起点和与梯度影响沿一个方向（或角度）。
句法
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );线性渐变-从上到下（默认）。
下面的例子表明，从顶端开始，线性渐变。 它开始红，过渡到黄色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} 试一试» 线性渐变-左到右
下面的例子表明，从左侧开始的线性梯度。 它开始红，过渡到黄色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} 试一试» 线性渐变-对角线
可以对角地通过指定水平和垂直起始位置作出一个梯度。
下面的例子显示了开始于左上角（并转到右下）线性渐变。 它开始红，过渡到黄色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} 试一试» 使用角度
如果你想在梯度的方向更多的控制，你可以定义一个角度，而不是预定的方向（上下，到顶部，向右，向左，到右下角，等等）。
句法
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
的角度被指定为水平线和梯度线之间的角度。
下面的例子说明如何在线性渐变使用角度：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} 试一试» 使用多个颜色停止
下面的例子显示了一个线性渐变（从上到下）与多个色标：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} 试一试» 下面的例子演示如何创建一个线性渐变的彩虹和一些文字的颜色（从左至右）：
渐变背景
例
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} 试一试» 使用透明度
CSS3梯度也支持透明度，其可用于创建衰落效应。
要增加透明度，我们使用rgba()函数来定义颜色停止。 在最后一个参数rgba()函数可以是从0到1的值，并且它定义了颜色的透明度：0表示完全透明，1表示全色（无透明度）。
下面的例子表明，从左侧开始的线性梯度。 它开始完全透明，完全转换成红色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} 试一试» 重复的线性梯度
的repeating-linear-gradient()函数是用来重复线性梯度：
例
一个重复的线性渐变：
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} 试一试» CSS3径向渐变
径向渐变是由它的中心来定义。
要创建一个径向渐变，你也必须限定至少两个色标。
句法
background: radial-gradient( shape size at position, start-color, ..., last-color );默认情况下，形状是椭圆形，大小为最远角落，位置是中锋。
径向渐变-间隔均匀的色标（默认）。
下面的例子显示了均匀分布的色标径向渐变：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} 试一试» 径向渐变-以不同的间隔颜色停止
下面的例子显示了不同的间隔色标径向渐变：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} 试一试» 设定的形状
形状参数定义的形状。 它可以采取的价值圆形或椭圆形。 默认值是椭圆。
下面的例子显示了一个圆形状的径向渐变：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} 试一试» 不同尺寸关键字的使用
尺寸参数定义梯度的大小。 它可以采取四个值：
- 最接近端
- 最远的端
- 最近的角
- 最远的角落
例
径向渐变不同尺寸的关键字：
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} 试一试» 重复径向梯度
的repeating-radial-gradient()函数是用来重复径向梯度：
例
一个重复径向渐变：
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} 试一试» 自测练习用！
练习1» 练习2» 练习3» 练习4» 练习5» 练习6» 练习7»