摘要：
一： 一般渐变未设置角度，则默认为180deg（从上到下）设置了角度，则0deg为竖直向上，然后顺时针旋转上图！二： 块渐变.aq1{ &nb... 一： 一般渐变
未设置角度，则默认为180deg（从上到下）
设置了角度，则0deg为竖直向上，然后顺时针旋转
上图！
二： 块渐变
.aq1{
background-image: linear-gradient(45deg,#87f 60%,#f78 60%);
}
.aq2{
background-image: linear-gradient(90deg,#87f 60%,#f78 60%);
}
.aq3{
background-image: linear-gradient(90deg,#87f 40%,#f78 60%);
}
.aq4{
background-image: linear-gradient(110deg,#87f 33%,#f78 33%,#f78 66%,#d1d1d1 66%);
}注意aq124和aq3的区别，如果比例之间有空隙则会形成渐变来过渡，如果同一比例有两种颜色则不会形成渐变。
多块
代码:
.aq5{
width: 500px;
height: 200px;
background-image: linear-gradient(100deg,red 30%,transparent 30%),
linear-gradient(60deg,yellow 25%,yellow 60%,transparent 60%),
linear-gradient(150deg, transparent 20%,green 20%);
}效果
为了处理留白问题，所以设置了重叠部分，即后面的百分比小于前面的
测试demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body,.one,.two,.three{
display: flex;
flex-wrap: wrap;
}
.a{
width: 100%;
}
.a *{
height: 100px;
width: 10%;
}
.anull{
background-image: linear-gradient(#78f, #f78);
}
.a0{
background-image: linear-gradient(0deg,#78f, #f78);
}
.a45{
background-image: linear-gradient(45deg,#78f, #f78);
}
.a90{
background-image: linear-gradient(90deg,#78f, #f78);
}
.a180{
background-image: linear-gradient(180deg,#78f, #f78);
}
.a270{
background-image: linear-gradient(270deg,#78f, #f78);
}
.aq1{
background-image: linear-gradient(45deg,#87f 60%,#f78 60%);
}
.aq2{
background-image: linear-gradient(90deg,#87f 60%,#f78 60%);
}
.aq3{
background-image: linear-gradient(90deg,#87f 40%,#f78 60%);
}
.aq4{
background-image: linear-gradient(110deg,#87f 33%,#f78 33%,#f78 66%,#d1d1d1 66%);
}
#div3{
background:linear-gradient(250deg,#a0a 30%,rgba(0,0,0,0) 30%),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background-size:cover;
/* background-position:top left; */
}
</style>
</head>
<body>
<div class="one a">
不设置直角度<div></div>
0<div></div>
45<div></div>
90<div></div>
180<div></div>
270<div></div>
</div>
<div class="two a">
45<div></div>
90<div></div>
90<div></div>
110<div></div>
</div>
<div class="three a">
<div id="div3"></div>
</div>
</body>
</html>效果：
注意最后一个例子一定要设置透明（不一定要一个比例的位置有两种颜色，可有空隙形成渐变，可见下图），因为至少要有两个颜色
background-image: linear-gradient(to bottom, white 0%, red 50%, #000 100%);
0%处：纯白
50%处：纯红
100%处：纯黑
设置颜色，其实是设置颜色点。下面这句和上面那句等效
background-image: linear-gradient(to bottom, /* rgb(86, 71, 117) */white, red, #000);
三个颜色点，则有两个均等的过度块，将100vh分为2个均等的过度块，则系统默认将颜色点的位置设为0%,50%,100%
此篇文章由DurkBlue发布，撰文不易，转载请注明来处
