重复线性渐变 | repeating-linear-gradient

repeating-linear-gradient()函数创建一个由重复线性渐变组成的 <image>。它类似于linear-gradient() 并采取相同的参数, 但它重复的颜色停止无限的所有方向, 以覆盖其整个容器。函数的结果是 <gradient> 数据类型的一个对象, 它是一种特殊的 <image>

/* A repeating gradient tilted 45 degrees,
   starting blue and finishing red */
repeating-linear-gradient(45deg, blue, red);

/* A repeating gradient going from the bottom right to the top left,
   starting blue and finishing red */
repeating-linear-gradient(to left top, blue, red);

/* A repeating gradient going from the bottom to top,
   starting blue, turning green after 40%,
   and finishing red */
repeating-linear-gradient(0deg, blue, green 40%, red);

每次重复, 颜色停止的位置由基本线性渐变的长度的倍数 (最后颜色中止和第一个之间的距离) 转移。因此, 每个结束色停止的位置与起始色停止重合;如果颜色值不同, 这将导致急剧的视觉转换。

与任何梯度一样，重复的线性梯度具有没有内在维度也就是说，它没有自然的或优先的大小，也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。

使用说明：由于<gradient>s属于<image>数据类型，因此只能在可以使用<image>s的地方使用。出于这个原因，repeating-linear-gradient()将不能在background-color其他使用<color>数据类型的属性上工作。

句法

价值

<side-or-corner>渐变线起点的位置。如果指定，则由单词to和最多两个关键字组成：一个表示水平面（left或right），另一个表示垂直面（top或bottom）。侧面关键字的顺序无关紧要。如果未指定，则默认为tobottom.The值to top，to bottom，to left，和to right等同于角度0deg，180deg，270deg，和90deg分别。其他值被翻译成一个角度。<angle>梯度线的方向角度。从头开始，to top顺时针旋转。<color-stop>一个颜色停止的<color>值，后跟一个可选的停止位置（a <percentage>或<length>沿着渐变轴）。

注意：在CSS渐变中渲染颜色停止符合与SVG渐变中的颜色停止相同的规则。

形式语法

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              Definition of the gradient line         List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
   and <color-stop>     = <color> [ <percentage> | <length> ]?

实例

#grad1 {
  background-image: repeating-linear-gradient(180deg,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      rgba(255,255,255,1) 25px,
      rgba(255,255,255,1) 50px);
}

<ol>
  <li>Repeating horizontal bars
    <div id="grad1"></div>
  </li>
  <li>Zebra stripes   
    <div id="grad2"></div>
  </li>     
</ol>

div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}

#grad1 {
  background-image: -moz-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

#grad2 {
  background-color: black;
  background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}

<ol>
  <li>repeating gradient
    <div id="grad1"></div>
  </li>
  <li>Zebra pattern   
    <div id="grad2"></div>
  </li>     
</ol>

规格

浏览器兼容性