渐变
● 线性渐变（向下/向上/向左/向右/对角线）
● 径向渐变（由其中心定义）
线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
● direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向;
● color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。
🌰
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 50px;
float: left;
margin: 10px;
}
.one {
background: linear-gradient(to right bottom, red, blue 70px);
}
.two {
background: linear-gradient(190deg, #000, #FFF);
}
.three {
background: linear-gradient(red, green, blue);
}
.four {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
径向渐变
background-image:radial-gradient(shape size at position, color-stop1, color-stop2, ...);
● at：一个关键字，需要放置在参数 position 的前面；
● position：指定渐变起点的坐标，您可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等形式指定渐变起点的坐标，如果提供 2 个参数，那么第一个参数用来表示横坐标，第二个参数用来表示纵坐标，如果只提供一个参数，那么第二个参数将被默认设置为 50%，即 center；
● shape：指定渐变的形状，可选值为 circle（圆形）、ellipse（椭圆）；
● size：指定渐变形状的大小，除了可以使用具体的数值来指定 circle、ellipse 的半径外，还可以使用下面所示的关键字来指定渐变形状的大小：
○ closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
○ closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
○ farthest-side：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的边；
○ farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。
● color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。
背景渐变
//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));
//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);
边框渐变
/* 边框渐变 */
.border-grident{
margin-top: 20px;
width: 200px;
height: 200px;
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}
文字渐变
background-image: linear-gradient(to top, #00C6FF, #8AFFD2); /* 线性渐变背景，方向向上 */
background-clip: text;/* 以文字的范围来裁剪背景图片 */
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
