CSS 渐变
CSS渐变用于显示两种或多种指定颜色之间的平滑过渡。
为什么使用CSS渐变
您不必使用图像来显示过渡效果。
还可以减少图像加载的时间和带宽使用量。
在缩放时，它为元素提供了更好的外观，因为渐变是由浏览器生成的。
CSS3中有两种类型的渐变。
线性渐变
径向渐变
1）CSS线性渐变
CSS3线性渐变向上/向下/向左/向右倾斜。要创建CSS3线性渐变，必须定义两个或多个色标。色标是用于创建平滑过渡的颜色。起点和方向也可以与渐变效果一起添加。
background: linear-gradient (direction, color-stop1, color-stop2.....);
（1）CSS线性渐变：（从上到下）
从上到下线性渐变是默认的线性渐变。让我们以从顶部开始的线性渐变为例。它从红色开始，然后过渡到绿色。
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(red, green);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, green);
/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>
输出：
线性渐变-从顶部到底部
此线性渐变从顶部开始。它从红色开始，过渡到绿色：
（2）CSS线性渐变：（从左到右）
下面的示例显示了从左到右的线性渐变。它从左侧开始为红色，然后过渡为绿色。
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red, green);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red, green);
/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>
输出：
线性渐变-从左到右
此线性渐变从左侧开始。它从红色开始，过渡到绿色：
（3）CSS线性渐变：（对角线）
如果同时指定水平和垂直起始位置，则可以使线性渐变对角线。
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red, green);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, green);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, green);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, green);
/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>
输出：
线性渐变-对角线
此线性渐变从左上方开始。它从红色开始，过渡到绿色：
2）CSS径向渐变
您必须至少定义两个色标才能创建径向渐变。它是由其中心定义的。
background: radial-gradient(shape size at position, start-color, ..., last-color);
（1）CSS径向渐变：（均匀分布的色标）
均匀分布的色标是默认的径向渐变。默认情况下，其形状为Eclipse，尺寸为最远，位置为中心。
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */
background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>
输出：
径向渐变-均匀分布的色标
（2）径向渐变：（不同间距的色标）
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>
输出：
径向渐变-不同间距的色标
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(blue 5%, green 15%, red 60%);
/* Safari 5.1 to 6.0 */
background: -o-radial-gradient(blue 5%, green 15%, red 60%);
/* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(blue 5%, green 15%, red 60%);
/* For Firefox 3.6 to 15 */
background: radial-gradient(blue 5%, green 15%, red 60%);
/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>
输出：
支持的浏览器
此表指定了完全支持渐变属性的第一个浏览器版本。
| 属性 |
chrome |
firefox |
ie |
opera |
safari |
| linear-gradient |
26.0
10.0-webkit- |
16.0
3.6-moz- |
10.0 |
12.1
11.1-o- |
6.1
5.1-webkit- |
| radial-gradient |
26.0
10.0-webkit- |
16.0
3.6-moz- |
10.0 |
12.1
11.1-o- |
6.1
5.1-webkit- |
| repeating-linear-gradient |
26.0
10.0-webkit- |
16.0
3.6-moz- |
10.0 |
12.1
11.1-o- |
6.1
5.1-webkit- |
| repeating-radial-gradient |
26.0
10.0-webkit- |
16.0
3.6-moz- |
10.0 |
12.1
11.1-o- |
6.1
5.1-webkit- |
