之前介绍过css 的线性渐变、径向渐变和圆锥渐变，如果您还不太了解这些知识，可以先学习前端入门——css 渐变 ，前端入门——css 圆锥渐变， 前端入门——css 线性渐变， 前端入门——css 径向渐变 ，再来看本篇的内容。

所谓重复渐变就是重复显示一组多颜色渐变，每种颜色都有指定的结束位置（color-stop），比如实现类似条纹的效果。css 最新规范定义了三种重复渐变，分别是线性、径向、圆锥重复渐变，其使用语法和非重复渐变一样。

如下语法：

线性重复渐变

如下示例，制作一个45度且间隔10px的重复渐变效果：

css：

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

效果：

径向重复渐变

我们可有将上面的例子改成径向渐变，区别是比线性渐变多定义了形状和起点位置，如下示例，制作一个从左上角开始的间隔10px的径向渐变：

css：

.gradient {
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

效果：

圆锥重复渐变

圆锥渐变目前并不是所有浏览器支持，如果您的浏览器支持，将会看到如下示例，制作一个每30度间隔的重复渐变效果：

css：

.gradient {
  background-image:
    repeating-conic-gradient(
      from 0deg, 
      #ff8a00 0deg 30deg, 
      #e52e71 30deg 60deg
  );
}

其它例子

除了以上简单的示例，通过重复渐变还能实现更多效果，比如下面几个例子：

结合多背景效果实现棋盘效果：

.gradient-pattern {
  background-color: #fff;
  background-image: linear-gradient(
      45deg,
      #333 25%,
      transparent 25%,
      transparent 75%,
      #333 75%,
      #333
    ),
    linear-gradient(
      -45deg,
      #333 25%,
      transparent 25%,
      transparent 75%,
      #333 75%,
      #333
    );
  background-size: 50px 50px;
  height: 250px;
}

效果：

结论

重复渐变简单化了css渐变中使用多颜色的用法，上面的效果不使用重复渐变也可以通过普通的渐变实现，但是很麻烦，您要写很多的代码。

本篇主要介绍了三种重复渐变：

• 线性重复渐变 —— repeating-linear-gradient
• 径向重复渐变 —— repeating-radial-gradient
• 圆锥重复渐变 —— repeating-conic-gradient

其语法、颜色值和普通渐变的使用方法一样，关于css渐变到此就全部介绍完了。在实际工作中要结合实际情况灵活使用，活学活用，融会贯通才行，css 的学习看似简单实则不简单，其知识点太多，尤其是语法太灵活不好掌握，要多加练习才行。

感谢关注，欢迎指正。