很早以前写过一篇线性渐变的文章，如果还没有掌握CSS3中的线性渐变，建议先看一下。

CSS3教程：background-image之线性渐变（linear-gradient）最in版！

时隔一年半，再把它的姐妹篇——重复线性渐变搞定，才算是真正完结了吧。忍不住感叹，How time flies!

这个属性也是属于background-image类型的，所以不支持background-color。

一、语法结构

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> ]?

仔细一看，貌似和linear-gradient没啥区别啊。

1、angle

渐变的角度，0deg到360deg，也可以是负数。默认值180deg。除了deg可以表示角度之外，turn、grad、rad，都可以表示角度。比如一个满圆360deg=1turn。

具体可以查看这篇文章。MDN文档之angle角度

2、side-or-corner

用方位来表示角度，比如 to top表示0deg，to bottom 表示180deg，to right 表示90deg，to left 表示270deg。其实就是y轴的顺时针旋转。

也可以 to left top 表示从右下到左上的对角线。to left bottom 表示从右上到左下的对角线。 默认是从上往下。

3、color-stop

由颜色和位置组成。

颜色是必须值，位置可以是固定像素值，也可以是百分比值。多个颜色用逗号隔开。

比如  #ff8 50%，rgba(255,255,255, .6) 120px，transparent 12%等。

其实重复渐变有点像ps里面的填充图案，定义一个图案为基本单元，然后在一个区域里面进行平铺，达到重复的目的。

二、案例

1、两个颜色构成一个基本单元，第一个颜色从0开始，第二个颜色占据容器高度的10%的位置。所以容器高，渐变条就高，与容器高度保持一致的变化。

See the Pen repeating-linear-gradient案例1 by zhaolanzhen (@mrszhao) on CodePen.

三个颜色构成一个单元，加上角度。

See the Pen repeating-linear-gradient案例2-1 by zhaolanzhen (@mrszhao) on CodePen.

2、颜色可以固定具体的位置，当结束颜色和下一个起始颜色的位置是一样，但颜色值不一样的时候，可以产生很生硬的过渡，如果两个不同颜色之间的距离越大，渐变越柔和。颜色单元的高度固定的时候，不随着容器的大小发生高度的变化，只是平铺多少的变化了。

See the Pen repeating-linear-gradient案例2 by zhaolanzhen (@mrszhao) on CodePen.

3、加上角度和rgba透明度的变化

See the Pen repeating-linear-gradient案例3 by zhaolanzhen (@mrszhao) on CodePen.

4、可以直接用transparent表示透明。

See the Pen repeating-linear-gradient案例4 by zhaolanzhen (@mrszhao) on CodePen.

5、结合多重背景和透明度，可以实现很丰富的效果

See the Pen repeating-linear-gradient案例5 by zhaolanzhen (@mrszhao) on CodePen.

再来一个疯狂的提一下神，这个效果来自于CSS3 patterns gallery

See the Pen repeating-linear-gradient案例6 by zhaolanzhen (@mrszhao) on CodePen.

周末加班中·····