渐变是现代前端开发中使用频率很高的属性，原本需要导出图片才能实现的效果通过渐变我们只需几行代码即可实现。且其扩展性比图片强很多。
CSS 渐变的本质是颜色的插值——在两个或多个颜色之间，按照特定规则生成平滑过渡。浏览器不需要图片，只需一行 CSS，就能绘制出无限分辨率的渐变效果。
不仅如此，利用渐变属性我们也可以通过 JavaScript 来实现动态的渐变效果。
线性渐变 (linear-gradient)
linear-gradient 沿一条直线轴过渡颜色。轴的方向由角度决定：0deg 从下到上，90deg 从左到右，180deg 从上到下。
.element {
/* 角度定义方法, 从红色渐变到蓝色 */
background: linear-gradient(180deg, red, blue);
/* 也可以用方向关键词, 从左边到右边 */
background: linear-gradient(to right, red, blue);
/* 红色渐变到20%的位置，剩余是蓝色的渐变 */
background: linear-gradient(90deg, red, 20%, blue);
}
可以尝试更改下面的可视化工具，来观察线性渐变角度和颜色。
硬边效果
在渐变中有一个常用的技巧是通过渐变绘制硬边效果，利用这个技巧可以绘制一些比如彩带的效果。技巧就是将两个色标设置为相同位置（如都是 50%），可以得到无过渡的硬边。
.element {
background: linear-gradient(90deg, #e63946 50%, #f4a261 50%);
}
上面两个颜色的位置都相同，这意味着左边和右边分别是对应的颜色并且不会产生渐变效果。效果如下：
这里有一个交互式组件可用于产生硬边效果，你可以拖动滚动条来尝试一下自己创建一个硬边效果。
线性渐变技巧
这里收集了一些常见的线性渐变技巧。
硬边分割
同一位置放两个色标，产生无过渡的硬切分割线，可做颜色块拼接。
background: linear-gradient(90deg, red 50%, blue 50%)
repeating 等间距条纹
用 repeating-linear-gradient 无限重复，无需 background-size 即可平铺。
background: repeating-linear-gradient(45deg, #000 0 10px, #e63946 10px 20px)
渐变文字
配合 background-clip: text 实现渐变色文字，注意需要设置 color: transparent。
background: linear-gradient(90deg, red, blue)
几何图案背景
多层 linear-gradient 组合 + background-size，可以构造出菱形、三角形等几何图案。
background: linear-gradient(135deg, #000 25%, transparent 25%),
linear-gradient(45deg, #000 25%, transparent 25%)
径向渐变(radial-gradient)
径向渐变(radial-gradient)可以在一个圆形或椭圆中创建一个从中心点向外辐射的渐变。
它一般常用语法是：
.element {
/* 创建一个基础的椭圆渐变 */
background: radial-gradient(gold, pink);
/* 指定渐变的位置以及渐变的结束时形状的大小 */
background: radial-gradient(closest-side at center, gold, pink);
}
径向渐变最难理解的就是:
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
它的作用是决定渐变的结束时形状的大小，不用担心后面有专门的例子来详细解释和演示你会明白的。
at 关键字
at 关键字是用来连接渐变图和渐变结束时形状大小与位置的语法。我理解它就是一种语义化的书写方式只需要记住即可。
比如这里的：
.element {
background: radial-gradient(closest-side at center, gold, pink);
}
closest-side at center 在这里说的是：与中心点最接近的边。那么他就是渐变结束时形状的大小(也就是渐变的最终大小区域)。
现在你可以拖动区域的小原点或者修改下拉和颜色参数，来直观的感受径向渐变的工作方式。
<size> 属性
上面提到 size 属性用于指定渐变结束时形状的大小，它可能得参数是：closest-corner、closest-side、farthest-corner、farthest-side。
closest-side
参数说的是：如果形状是一个椭圆(ellipse)，那么水平半径大小具体取决于椭圆的中心点距离左边近还是距离右边近。垂直半径大小具体取决于椭圆的中心点距离顶部近还是距离底部近。
如上图所示：rx = 圆心到最近水平边的距离，ry = 圆心到最近垂直边的距离，所以椭圆的半径是 rx = 144，ry = 104。
.element {
background: radial-gradient(
closest-side at 144px 104px,
olive,
mediumPurple 99%,
black
);
}
下面大小为 closest-side 径向渐变渲染后的效果：
如果渐变图形是一个 circle 那么就是看圆心距离左边和顶边那个跟进就是其最终绘制是的图形大小。还是上面的代码把图形改成 circle 看看：
.element {
background: radial-gradient(
circle closest-side at 144px 104px,
olive,
mediumPurple 99%,
black
);
}
渐变在顶部因为我们的圆心距离顶部只有 104px，它小于左边的 144px 所以绘制时结束位置的边是顶边。
farthest-side
当理解 closest-side 后对于 farthest-side 就更好理解了，farthest-side 就是寻找最远的边作为渐变的结束时的位置。还是来先看下面的示意图：
如上图所示：rx = 圆心到最远水平边的距离，ry = 圆心到最远垂直边的距离，所以椭圆的半径是 rx = 256，ry = 157。
.element {
background: radial-gradient(
farthest-side at 144px 104px,
olive,
mediumPurple 99%,
black
);
}
下面大小为 farthest-side 径向渐变渲染后的效果：
closest-corner
这个参数的意思是最近角的大小，就是我们的椭圆边与元素的那个最近角相切那么其大小就是结束时位置的形状大小。
我们还是来看下面我画的一个示例图。
我们可以看到从 rx = 144 xy = 104 位置开始到左上角是最近与椭圆相切的角。那么此时这个椭圆与元素相交区域就是我们要绘制渐变的最终结束大小。
.element {
background: radial-gradient(
closest-corner at 144px 104px,
olive,
mediumPurple 99%,
transparent
);
}
下面大小为 closest-corner 径向渐变渲染后的效果：
farthest-corner
当我们理解了上面的 closest-corner 对于 farthest-corner 就更好理解了，farthest-corner 就是寻找最远的角作为渐变的结束时的位置。。还是来先看下面的示意图：
我们可以看到从 rx = 144 xy = 104 位置开始到右下角是最近与椭圆相切的角。那么此时这个椭圆与元素相交区域就是我们要绘制渐变的最终结束大小。
.element {
background: radial-gradient(
farthest-corner at 144px 104px,
olive,
mediumPurple 99%,
transparent
);
}
下面大小为 farthest-corner 径向渐变渲染后的效果：
锥形渐变 (conic-gradient)
我们知道了 linear-gradient 是基于元素的宽度高绘制渐变，radial-gradient 是基于圆形和椭圆绘制渐变。那么锥形就是基于角度从0 ~ 360度之间的渐变。
conic-gradient 围绕一个中心点旋转过渡颜色，就像钟表的表盘。它非常适合制作饼图、色轮、角度效果。
.element {
/* 基础语法 */
background: conic-gradient(red, orange, yellow, green, blue);
/* 基于开始角度和绘制在指定位置语法 */
background: conic-gradient(
from 90deg at 50% 30%,
#f69d3c,
10deg,
#3f87a6,
350deg,
#ebf8e1
);
/* 绘制类似于饼图的效果，两个位置相同的角度会制造硬边效果 */
background: conic-gradient(
red 6deg,
orange 6deg,
orange 18deg,
yellow 18deg,
yellow 45deg,
green 45deg,
green 110deg,
blue 110deg,
blue 200deg,
purple 200deg
);
}
总结
通过上面的学习分析和实践，了解了如何使用 CSS 渐变属性来创建各种效果。在实际开发中，我们可以将渐变添加到元素上，并使用不同的渐变属性来定义渐变的方向和色彩。