重复性线性渐变颜色后面的百分比代表什么，
重复性线性渐变，颜色后面的百分比代表什么，为什么会重复5次，谁决定的
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
其中：
1、angle
渐变的角度，0deg到360deg，也可以是负数。默认值180deg。除了deg可以表示角度之外，turn、grad、rad，都可以表示角度。比如一个满圆360deg=1turn。
2、side-or-corner
用方位来表示角度，比如 to top表示0deg，to bottom 表示180deg，to right 表示90deg，to left 表示270deg。其实就是y轴的顺时针旋转。
也可以 to left top 表示从右下到左上的对角线。to left bottom 表示从右上到左下的对角线。 默认是从上往下。
3，color-stop1, color-stop2 ....
每一个color-stop都由颜色和位置组成。
颜色是必须值，位置可以是固定像素值，也可以是百分比值。多个颜色用逗号隔开。
比如： #ff8 50%，rgba(255,255,255, .6) 120px，transparent 12%等。
其实重复渐变有点像ps里面的填充图案，定义一个图案为基本单元，然后在一个区域里面进行平铺，达到重复的目的。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变</title>
<style>
#grad1 {
height: 200px;
background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%);
}
#grad2 {
height: 200px;
background-image: repeating-linear-gradient(190deg,red,blue 7%,green 10%);
}
#grad3 {
height: 200px;
background-image: repeating-linear-gradient(red,blue 7%,green 10%);
}
</style>
</head>
<body>
<h3>重复线性渐变</h3>
<p>45 度线性渐变，从红色到蓝色：</p>
<div id="grad1"></div>
<p>190 度线性渐变，从红色到蓝色：</p>
<div id="grad2"></div>
<p>线性渐变，从红色到蓝色：</p>
<div id="grad3"></div>
</body>
</html>
颜色后面跟的百分比是这个颜色值距离起点的开始位置，30%就是距离起点30%开始这个颜色。
比如：background: linear-gradient(red 10%, green 85%, blue 90%);
代表该颜色占整个颜色的比例,不写就默认均分
以你的代码为例，从红色开始(你可以认为它的百分百默认是0%，因为第一个嘛~)，到黄色10%是渐变的，也就是在整个区域(块)中，前10%的部分是从红色渐变成黄色然后green 20%，就是再渐变成绿色，其余没有规定的后80%，则会重复上述渐变规则（你这里规定了前20%，其余80%重复这个20%，也就是重复了5次）。希望我的回答对你有用，有缘再见。
百分比是指 **某个颜色值距离起点的开始位置 **。默认的渐变方式为从上往下，所以当某个颜色值设置了百分比后，便会从距离顶端相关的距离（百分比计算）开始填充实色。而渐变色会在顶部与尾部的中间填充。我们可以自己来验证相关的例子：
第一个我没有设置任何的百分比
background:linear-gradient(
red,
orange
);
效果跟上图并没有区别，所以如果我们不设置百分比的话，默认是根据颜色的个数来给每个颜色值设置的，最后一个颜色的百分比值就是100%，而起始的值就是0%，中间如果再有多个颜色值，则根据100/（个数-1）平均下去。相同的我们可以设置多个值例如
background:linear-gradient(
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background:linear-gradient(
red 0%,
orange 16.67%,
yellow 33.33%,
green 50.00%,
blue 66.67%,
indigo 83.33%,
violet 100%
);
上面这两个代码效果都是一致的,
如果有其他不懂的，可以再看看这篇文章https://blog.csdn.net/soopencool/article/details/105391876
如果对你有帮助的话，希望采纳，欢迎关注我一起学习
repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%)，3.8%与4%之间就是线条的宽度，但是这样做出来的有缺陷，
这种线条并不能随内容增多而保持原有的线与线的距离。
作一个改进：
将百分比换为像素，41px-44px可自己调节线与线的距离以及线的高度background-image: repeating-linear-gradient(#ffffff,#ffffff 41px,#000 44px);
这里有我做的一个稿纸的页面https://blog.csdn.net/weixin_44093204/article/details/125097687?spm=1001.2014.3001.5502
可以看一下这篇文章，分析过关于渐变添加百分比的分析，还有一些关于渐变的例子
https://blog.csdn.net/weixin_41897680/article/details/122357130