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 x 20px正方形。 如果有多种颜色链接到图案，则同样如此。 最终停止点的最终颜色是决定重复序列大小和位置的因素。

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

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen lAkyo 。

与径向相同：

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

在CodePen上查看 Chris Coyier （ @chriscoyier ）的“笔重复渐变” 。

浏览器支持

目前，重复渐变具有强大的浏览器支持。 就是说，在撰写本文时，我们仅在讨论线性和径向渐变，因为圆锥形渐变仍然是规范第4级工作草案中的一项建议功能。 希望我们能在达到候选推荐标准后就将其广泛采用。

该浏览器支持数据来自Caniuse ，其更多信息。 数字表示浏览器支持该版本及更高版本的功能。

桌面

铬	火狐浏览器	IE浏览器	边缘	苹果浏览器
10 *	3.6 *	10	12	5.1 *

手机/平板电脑

Android Chrome浏览器	Android Firefox	安卓系统	iOS Safari
81	68	4 *	5.0-5.1 *

其他资源

• CSS图像值和替换的内容模块级别3 ：在官方规范中引入了重复渐变的概念，但仅用于重复线性和径向渐变
• SS图像值和替换的内容模块级别4 ：这是当前工作草案，正在考虑将圆锥形渐变纳入官方规格。
• CSS3 Patterns Gallery ： Lea Verou展示了一个棘手的渐变图案展示，其中包括许多使用重复渐变技术的作品。

翻译自: https://css-tricks.com/snippets/css/css-repeating-gradients/