CSS repeating-linear-gradient线性渐变重复函数

学习最好的方法，就是把你知道的告诉别人

条纹

上面图片的样式我们应该怎么实现呢？
其实很简单，ta不就是黑黄-黑黄不断重复嘛，那我们可以给一个元素的背景渐变设置起始位置和结束位置的颜色值，然后把他们的终止位置又变成起始位置，这个过程不断重复即可。

repeating-linear-gradient函数就是干这事的专家：

background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );

• 角度就是渐变的方向
• 渐变颜色，由颜色值和起始值 到 颜色值和终止值组成，位置值可以使用px值和百分比值来表示，位置的起始值和终止值代表渐变发生的宽度，repeating-linear-gradient函数会循环执行这个过程，让元素生成有规则的条纹。

下面代码有助于你的理解：
0px [黄色 -- 过渡 -- 黄色] 40px [黑色 -- 过渡 -- 黑色] 80px