repeating-linear-gradient()功能非常类似linear-gradient()，主要的不同是前者重复渐变模式。

repeating-linear-gradiet()接收多样性的值，但是很简洁，你将通过角度值和起止停止值来完成挑战。

角度值the angle是渐变的方向。颜色起止color stops像是宽度值，以标记变形的位置，使用百分比或者px。

0px [yellow -- blend --blue] 40px [green -- blend -- red] 80px

在颜色编辑的例子里，这个渐变开始从0px的yellow开始，然后从40px混合第二个颜色的blue,渐变立即改变为第三个颜色green，然后从渐变开始80px处混合第四个颜色red。

对于这个例子，它帮助思考颜色起止是每两个颜色混在一起作为一对。

如果每两个颜色起止是相同的颜色，混合就不是那么明显，因为他们是相同颜色。找一个不同颜色，这样你可以做一个条纹。

通过改变'repeating-linear-gradient()'创造条纹，角度为45deg,设置第一个颜色起止值是yellow,最后的颜色起止值为black。

<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );
  }

</style>

<div></div>

Applied Visual Design: Use a CSS Linear Gradient to Create a Striped Element | Learn freeCodeCamp

2018-10-29 17:36:25