CSS3渐变可让您在两种或多种指定颜色之间显示平滑过渡。
之前，您必须使用图像来实现这些效果。但是，通过使用CSS3渐变，您可以减少下载时间和带宽使用。此外，渐变元素在缩放时看起来更好，因为渐变是由浏览器生成的。
CSS3定义了两种类型的渐变：
- 线性渐变（向下/向上/向左/向右/对角线）
- 径向梯度（由其中心定义）
CSS3线性渐变
要创建线性渐变，您必须至少定义两个色标。颜色停止是您想要渲染平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
句法
background: linear-gradient(direction, color-stop1, color-stop2, ...);线性渐变 - 从上到下（这是默认值）
以下示例显示从顶部开始的线性渐变。它开始变红，过渡到黄色： !
例
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
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 yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
线性渐变 - 从左到右
以下示例显示从左侧开始的线性渐变。它开始变红，过渡到黄色： !
例
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
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 yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
线性渐变 - 对角线
您可以通过指定水平和垂直起始位置来对角线制作渐变。
以下示例显示从左上角开始（并向右下方）的线性渐变。它开始变红，过渡到黄色：
例
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
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 yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
更多CSS教程
学习更多CSS教程