在
CSS3 之前，渐变效果需要图像来完成，这增大了下载时间和带宽的使用。
CSS3 的渐变是由浏览器生成的，所以其更具优势。
CSS3 定义了两种类型的渐变：
- 线性渐变
- 径向渐变
渐变属于 image 类型，所以渐变只能在可以使用 image 的地方使用。
1、线性渐变
（1）标准语法
渐变至少是一种颜色朝另一种颜色变化，可以让你在两个或多个指定的颜色之间显示平稳的过渡。所以必须至少定义两种颜色节点。同时，可以给出颜色变化的方向，线性渐变的语法如下：
background: linear-gradient(to direction | angle, color-stop1, color-stop2...);
direction：渐变的⽅向，默认情况是从上到下- 标准语法⽅向是渐变的末尾位置，其他浏览器前缀语法是渐变的起始位置
- 注意：标准语法要放在其他浏览器语法后⾯
（2）角度渐变
⻆度渐变：标准语法0度指向北，其他浏览器前缀语法指向东
换算公式：90-标准语法⻆度=其他浏览器前缀语法⻆度
（3）重复的线性渐变
重复的线性渐变：repeating-linear-gradient()
线性渐变 - 从上到下（默认情况下）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1 {
width: 300px;
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="box1"></div>
</body>
线性渐变 - 从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1 {
width: 300px;
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to right,#e66465, #9198e5);
}
</style>
</head>
<body>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="box1"></div>
</body>
其实就是加上了 to right 这个值。
线性渐变-对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1 {
width: 300px;
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="box1"></div>
</body>
2、径向渐变
径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
background-image: radial-gradient(
shape size at position,
start-color,
...,
last-color
);
重复径向渐变：repeating-radial-gradient()
径向渐变 - 颜色结点均匀分布（默认情况下）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1 {
width: 300px;
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
/*指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），
渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。*/
/*径向渐变 - 颜色结点均匀分布（默认情况下）*/
background-image: radial-gradient(
red,
yellow,
blue
); /* 标准的语法（必须放在最后）*/
}
</style>
</head>
<body>
<p>从中心开始的径向渐变，渐变形状是椭圆形，起点是红色，平稳过渡到黄色、蓝色</p>
<div id="box1"></div>
</body>
径向渐变 - 颜色结点不均匀分布
<style>
#box1 {
width: 300px;
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
/*指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），
渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。*/
/*径向渐变 - 颜色结点均匀分布（默认情况下）*/
background-image: radial-gradient(
red 25%,
yellow 35%,
blue 60%
); /* 标准的语法（必须放在最后）*/
}
</style>
设置形状
<style>
#box1 {
width: 300px;
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
/*指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），
渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。*/
/*径向渐变 - 颜色结点均匀分布（默认情况下）*/
background-image: radial-gradient(
circle,
red 25%,
yellow 35%,
blue 60%
); /* 标准的语法（必须放在最后）*/
}
</style>
注意：由于不同的渲染引擎实现渐变的语法不同，这里只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
