本文已参与「新人创作礼」活动，一起开启掘金创作之路。
CSS 渐变 是由两种或多种颜色之间的渐进过渡组成。可以选择三种类型的渐变：线性 (由 [linear-gradient] 函数创建)，径向(由 [radial-gradient] 函数创建) 和圆锥 (由 [conic-gradient] 函数创建)。还可以使用 [repeating-linear-gradient] 和 [repeating-radial-gradient]函数创建重复渐变。
由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。 此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。
在开发过程中，线性渐变是使用最多的，也是比较简单的，下面我们将从线性渐变开始了解渐变怎么去使用。
1. 线性渐变
线性渐变创建了一条沿直线前进的颜色带。
- 基础线性渐变
要创建最基本的渐变类型，只需指定两种颜色即可
.box {
background: linear-gradient(blue, pink);
}
- 改变渐变方向
线性渐变默认是从上到下的方向，也可以自己指定一个值来改变渐变的方向。
.box {
background: linear-gradient(to right, blue, pink);
}
- 对角线渐变
渐变方向为从一个对角到另一个对角。
.box {
background: linear-gradient(to bottom right, blue, pink);
}
- 渐变角度
想要更精确地控制渐变的方向，可以给渐变设置一个具体的角度。
.box {
background: linear-gradient(70deg, blue, pink);
}
0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。
- 使用多种颜色
无需局限于使用两种颜色，想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。
.box {
background: linear-gradient(red, yellow, blue, orange);
}
不想让你设置的颜色在默认位置终止，可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点, 而100%表示终点
.box {
background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
2. 径向渐变
径向渐变由它的中心定义，为了创建一个径向渐变，也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
.box {
background: radial-gradient(red, green, blue);
}
- 改变渐变方向
线性渐变默认是从上到下的方向，也可以自己指定一个值来改变渐变的方向。
.box {
background: linear-gradient(to right, blue, pink);
}
.box {
background: radial-gradient(red 5%, green 15%, blue 60%);
}
- 设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
.box {
background: radial-gradient(ellipse, red, yellow, green);
}
.box {
background: radial-gradient(circle, red, yellow, green);
}
圆锥渐变用的不多，这里就不在解释了。
