持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

前言

上两篇文章学了css的线性渐变以及径向渐变，这篇文章来学习下重复渐变。

注意⚠️：渐变用在background-color上无效，要用在background-image或者background。

渐变

重复渐变

重复渐变是指可以重复的创建线性渐变和径向渐变，还有一个圆锥渐变。

重复的线性渐变

语法：

background-image: repeating-linear-gradient(direction, color1, color2, ...);

direction: 渐变的最终方向，可以是角度，180deg，也可以是to left。设置了最终方向，则开始方向也会确定了，因为线性渐变的开始和结束方向是中心对称的。

后面就是跟着渐变的颜色。

以下代码实现的就是从左下角向右上角重复渐变，从绿色渐变到10%的红色，最后到20%的蓝色。然后重复5次（100%除以20%）

    .box {
      width: 600px;
      height: 300px;
      background-image: repeating-linear-gradient(to top right, green, red 10%, blue 20%);
    }

重复的径向渐变：

语法：

background-image: repeating-radial-gradient(shape size at position, color1, color2, ...);

径向渐变就是从中心点向外扩散的渐变，呈圆形或者椭圆形扩散。

shape是形状，size是渐变的大小。 position是渐变的中心位置。 后面就是渐变的颜色。具体的参数设置可以查看上一篇文章

    .box {
      width: 300px;
      height: 300px;
      background-image: repeating-radial-gradient(circle, red, blue 10%, green 20%);
    }

从中心点，先是红色，再是蓝色，最后是绿色，然后往外重复

我们可以通过重复的径向渐变来实现箭靶：

    .box {
      width: 300px;
      height: 300px;
      background-image: repeating-radial-gradient(blue 0% 10%, red 10% 20%, green 20% 30%);
      border-radius: 50%;
    }

重复的圆锥渐变

语法：

background-image: repeating-conic-gradient(angle  position, color1 percent, color2 percent, ...);

angle：渐变的起始角度，默认是from 0deg
position：渐变的位置,默认是中心（at center），也可以用百分比

后面是跟着的颜色，可以设置角度和百分比，如果是一个值代表是结束点，如果是两个值，代表的是开始和结束点。

    .box {
      width: 300px;
      height: 300px;
      background-image: repeating-conic-gradient(from 0deg at center, red 0% 11.1%, blue 11.1% 22.2%, green 10% 33.3%);
      border-radius: 50%;
    }

    .box {
      width: 300px;
      height: 300px;
      background-image: repeating-conic-gradient(blue 10%, red 20%, green 30%);
      border-radius: 50%;
    }

这些图案看起来还挺好看的，哈哈哈

渐变还是挺好玩的，大家一起学起来吧～