css渐变是一种特殊的image格式，使用gradient表示，gradient属于image的子集，用于表示渐变的image，gradient的语法如下：
1. gradient 语法
div {
background-image: linear-gradient(gradient_direction, color_stop1, color_stop2, ...);
}
其中，gradient_direction表示渐变的方向，color_stop表示渐变的颜色，可以有多个，表示渐变的颜色。
2. gradient_direction
gradient_direction表示渐变的方向，可以是角度，也可以是方向，如下：
div {
background-image: linear-gradient(90deg, red, blue);
background-image: linear-gradient(to right, red, blue);
}
默认gradient_direction是可以省略的，省略后，渐变的方向是从上到下。
角度使用更加灵活，但是方向更加直观；
角度的取值范围是0deg到360deg；
方向的取值范围是to top、to right、to bottom、to left、to top right、to top left、to bottom right、to bottom left。
3. color_stop
color_stop表示渐变的颜色，可以是颜色值，也可以是颜色值加上百分比，如下：
div {
background-image: linear-gradient(red, blue);
background-image: linear-gradient(red 10%, blue 20%);
}
这里的数值表示渐变色的位置，数值的取值范围是0%到100%，这里的10%表示渐变色从左边的10%的位置开始，20%表示渐变色从左边的20%的位置结束。
当然这里的数值也可以超过100%，然后可以使用position属性来控制渐变色的位置，这个后面可以使用实际的例子来说明。
除了可以使用%表示渐变色的位置，还可以使用px表示渐变色的位置，同时这里的颜色可以有无数个，如下：
div {
background-image: linear-gradient(red 10px, blue 20px, green 30px, yellow 40px);
}
这里如果不指定位置，那么就是平均分配，如果起始位置大于或者等于结束位置，那么就不会显示渐变色。
div {
background-image: linear-gradient(red 50%, blue 50%);
}
这样就不会显示渐变色，而是上下平分两个颜色，即上面是红色，下面是蓝色。
4. 使用场景
渐变色可以理解为一个图片，所以在css任何可以使用image的地方都可以使用渐变色，如下：
li {
background-image: linear-gradient(red, blue);
border: 30px solid;
border-image: linear-gradient(green, yellow) 1;
list-style-image: linear-gradient(orange, purple);
}
这里的border-image表示边框的图片，list-style-image表示列表的图片。
5. 例子
5.1 创建一个三角形
div {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg, red 50%, transparent 50%);
}
这里的45deg表示渐变的方向是从左上角到右下角，red 50%表示渐变色从左上角的50%的位置开始，transparent 50%表示渐变色从左上角的50%的位置结束，这样就可以创建一个三角形。
以前我们可以使用border来创建一个三角形，但是这样的话，三角形的颜色是固定的，不仅代码多，大小不好控制，而且还不能设置渐变色，现在我们可以使用background-image来创建一个三角形，同时可以设置渐变色。
5.2 色相环
div {
width: 100px;
height: 100px;
background: conic-gradient(
from 90deg,
hsl(0deg, 100%, 50%),
hsl(60deg, 100%, 50%),
hsl(120deg, 100%, 50%),
hsl(180deg, 100%, 50%),
hsl(240deg, 100%, 50%),
hsl(300deg, 100%, 50%),
hsl(360deg, 100%, 50%)
);
border-radius: 50%;}
这里使用了conic-gradient来创建一个色相环，hs1表示色相，s表示饱和度，l表示亮度，from 90deg表示从90度开始，这样就可以创建一个色相环。
5.3 做一个渐变的边框
div {
width: 100px;
height: 100px;
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
background-size: 200% 200%;
background-position: 10px 10px;
border-radius: 10px;
-webkit-mask:
linear-gradient(black 10px, transparent 10px),
linear-gradient(90deg, black 10px, transparent 10px),
linear-gradient(360deg, black 10px, transparent 10px),
linear-gradient(270deg, black 10px, transparent 10px);
transition: all .3s;
}
div:hover {
background-position: 20px 20px;
}
这里没有使用border-image，而是使用了background来创建一个渐变的边框，因为border-image不支持圆角，同时使用了-webkit-mask来创建一个遮罩，这样就可以创建一个渐变的边框。
同时还加上了一个hover的动画，让这个边框动起来，更有乐趣。
