CSS 重复渐变

重复渐变利用了我们已经掌握的技巧，通过在linear-gradient()和radial-gradient()表示法中创造性地使用color-stops，并将其内置到我们的使用中。

其理念是我们能够通过创建的渐变来创建图案，并允许它们无限重复。

对于非重复渐变，有一个技巧，可以以这样一种方式创建渐变，如果它是一个小小的矩形，它将与其他小小矩形版本的自身对齐以创建重复图案。因此，本质上是创建该渐变并设置background-size以创建该小小的矩形。这使得创建条纹变得很容易，然后你可以旋转它或执行其他操作。

语法

有三种类型的重复渐变，其中两种目前在官方规范中得到支持，一种在当前的工作草案中。

每种表示法的语法与其相关的渐变类型相同。例如，repeating-linear-gradient()遵循与linear-gradient()相同的语法。

重复渐变	相关表示法	支持？
repeating-linear-gradient()	linear-gradient()	是
repeating-radial-gradient	radial-gradient()	是
repeating-conic-gradient	conic-gradient()	否

渐变重复的位置由**最终颜色停止点**决定。如果该点位于20px处，则渐变的大小（然后重复）为20px乘20px的正方形。如果有多种颜色链接到图案，则情况相同。最终颜色与最终停止点决定重复的大小和位置。

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

查看 Chris Coyier 在 CodePen 上的笔 lAkyo (@chriscoyier)。

径向渐变也是如此

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}

查看 Chris Coyier 在 CodePen 上的笔 重复渐变 (@chriscoyier)。

浏览器支持

重复渐变目前拥有良好的浏览器支持。也就是说，在撰写本文时，我们仅讨论线性渐变和径向渐变，因为圆锥渐变仍然是规范第 4 级工作草案中的一项提议功能。希望一旦它达到候选推荐，我们就能看到广泛的采用。

其他资源

• CSS 图像值和替换内容模块第 3 级：重复渐变的概念是在此规范中引入的，但仅限于重复线性渐变和径向渐变
• CSS 图像值和替换内容模块第 4 级：这是当前的工作草案，其中正在考虑将圆锥渐变包含到官方规范中。
• CSS3 图案库：Lea Verou 收集了一些复杂的渐变图案，其中许多使用了重复渐变技术。