看各位大佬的文章 总结 试着理解
渐变色：
两种的话，顶端和底部会保留部分实色，中间是两种颜色的过渡
第一种：
<!DOCTYPE html>
<head>
<style>
#d1{
width:400px;
height:400px;
background-image:repeating-linear-gradient(red,green);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果如下
11111111111111
第二种。
三个颜色时，底部和顶部还是保留部分实色，中间的颜色直接过渡。
旁边我设置了一个对照组，代码如下
<!DOCTYPE html>
<head>
<style>
#d1{
width:600px;
height:600px;
background-image:repeating-linear-gradient(red,green,blue);
float:left;
margin-right:10px;
}
#d2{
float:left;
}
#d2>div:nth-child(1){
width:200px;
height:200px;
background-color: red;
}
#d2>div:nth-child(2){
width:200px;
height:200px;
background-color:green;
}
#d2>div:nth-child(3){
width:200px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果如下：
第三种，如果你希望，某种颜色可以保留整个实色，那么就多添加一个颜色值。
比如，你现在一共有三个颜色值，红色、绿色、蓝色。现在你希望红色能保住整块实色，那么就在添加一个红色值。
代码如下
<!DOCTYPE html>
<head>
<style>
#d1{
width:600px;
height:600px;
background-image:repeating-linear-gradient(red,red,green,blue);
float:left;
margin-right:10px;
}
#d2{
float:left;
}
#d2>div:nth-child(1){
width:200px;
height:200px;
background-color: red;
}
#d2>div:nth-child(2){
width:200px;
height:200px;
background-color:green;
}
#d2>div:nth-child(3){
width:200px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果如下
第三种，第二个实验
代码如下
<!DOCTYPE html>
<head>
<style>
#d1{
width:600px;
height:600px;
background-image:repeating-linear-gradient(red,green,green,blue);
float:left;
margin-right:10px;
}
#d2{
float:left;
}
#d2>div:nth-child(1){
width:200px;
height:200px;
background-color: red;
}
#d2>div:nth-child(2){
width:200px;
height:200px;
background-color:green;
}
#d2>div:nth-child(3){
width:200px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果图如下
第四种，百分比
百分比指的是距离顶部多少百分比开始渐变。
等下写