线性渐变
其语法格式：
background-image: linear-gradient(side-or-corner|angle, linear-color-stop);
参数说明如下：
- side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
- angle 是用角度值来指定渐变的方向。
- linear-color-stop 是设置渐变的颜色值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#linear {
display: flex;
}
/*从上到下线性渐变*/
.gradient1 {
width: 100px;
height: 100px;
background-image: linear-gradient(#ff577f, #c6c9ff);
}
/*从左到右线性渐变*/
.gradient2 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
}
/*从左上角到右下角的渐变*/
.gradient3 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
}
/*定义角度的渐变*/
.gradient4 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
}
</style>
</head>
<body>
<div id="linear">
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>
</div>
</body>
</html>
image.png
