1、线性渐变（linear-gradient）
语法：background: linear-gradient(方向, 颜色1, 颜色2, ...);
方向：从上到下（to bottom）、从下到上（to top）、从左到右（to right）、从右到左（to left）、对角-从左上到右下（to right bottom）... 、角度-从下到上（0deg）...
默认：从上到下（to bottom）
实例：background: linear-gradient(red, blue) 等同于 background: linear-gradient(to bottom, red, blue)
效果：
对角实例： background: linear-gradient(to right bottom, red, blue) 等同于 background: linear-gradient(to bottom right , red, blue)
效果：
角度实例：background: linear-gradient(45deg, red, blue);
效果：
角度参考：
渐变位置实例：background: linear-gradient(red, yellow 20%, green 60%);
效果：
重复线性渐变实例： background: repeating-linear-gradient(red, yellow 10%, green 20%);
效果：
2、径向渐变（radial-gradient）
语法：background: radial-gradient(shape size at position, start-color, ..., last-color);
参数：
shape: ellipse（椭圆形）(默认)、circle（圆形）
size: 渐变半径尺寸
farthest-corner(默认)：从圆心到离圆心最远的角的距离；
farthest-side：从圆心到离圆心最远的边的距离；
closest-side: 从圆心到离圆心最近的边的距离；
closest-corner: 从圆心到离圆心最近的角的距离；
position: 渐变圆心的位置
center（默认）
top：顶部
bottom: 底部
at x,y： 渐变圆心在坐标（x,y）处
实例：
background: radial-gradient(circle closest-side at 100px 50px,red,blue);
3、案例
案例一：实现一个渐变框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>渐变框</title>
<style>
.box {
width: 200px;
height: 100px;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(45deg, red, blue) border-box;
border: 2px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果：
案例二：文字渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字渐变</title>
<style>
/* 缩写写法 */
.box {
background: linear-gradient(45deg, red, green, blue) text;
color: transparent;
}
/* 完整写法 */
/* .box {
background-image: linear-gradient(45deg, red, green, blue);
background-clip: text;
color: transparent;
} */
</style>
</head>
<body>
<span class="box">渐变文字</span>
</body>
</html>
效果：
案例三：文字动态渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字动态渐变</title>
<style>
span {
background: radial-gradient(circle, red, green, blue);
background-size: 300% 300%;
background-clip: text;
color: transparent;
font-weight: bold;
font-size: 50px;
animation: radialGradient 8s ease infinite;
}
@keyframes radialGradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
</style>
</head>
<body>
<span>文字动态渐变</span>
</body>
</html>
效果：
