我是一个学习网络开发的新手.我正在努力向MDN Docs学习.他们提供了可用的教程，因此很容易理解.但他们关于repeating-linear-gradient的material 让我感到困惑.他们的site上给出了以下代码.我在这里添加了div，以便在代码片段中可以看到渐变.
div {
height: 600px;
width: 600px;
background: repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
}<div></div>对此给出的解释是
A gradient repeating five times, going from the left to right, starting red, turning green, and back to red个
我从左到右都明白了.但为什么这种情况要重复五次呢？我也很难理解所给出的停靠点.red是从0%开始还是在0%结束？MDN文档在这方面令人困惑.有谁能解释一下吗？
让我们从头到尾学习repeating linear-gradient语法.
to right defines the direction of the gradient. In this case from left to right.
red 0% means that it should start with red at 0% of the distance.
green 10% will let green be at the 10% distance while the colors will merge (gradient effect).
red 20% is the last value of the syntax and it means that it should end at 20% with red.
0% pure red
1-4% more red than green (decreasing)
5% equally red and green
6-9% more green than red (increasing)
10% pure green
11-14% more green than red (decreasing)
15% equally red and green
16-19% more red than green (increasing)
20% solid red
21-24% more red than green (decreasing>
25% equally green and red
... keeps repeating
在那之后，它将self 重复.100% / 20% = 5，这就是为什么它会重复5次.
如果我们添加一个新值，如blue 50%，则它需要50%的距离，并且只能重复两次:
div {
height: 600px;
width: 600px;
background: repeating-linear-gradient(to right, red 0%, green 10%, red 20%, blue 50%);
}<div></div>