前面的CSS3线性渐变（linear-gradient）讲了CSS3线性渐变，这篇文章是它的姊妹篇——重复线性渐变repeating-linear-gradient。
Repeating-Linear-gradient() 函数创建重复线性渐变。 它类似于 Linear-gradient() 并采用相同的参数，但它在所有方向上无限重复颜色停止以覆盖其整个容器。 函数的结果是一个特殊数据类型的对象。
1. 语法结构
repeating-linear-gradient( [ | to ,]? [,]+ )
---------------------------------/----------------------------/
Definition of the gradient line List of color stops
where = [left | right] || [top | bottom]
and = [ | ]?
仔细一看，似乎线性渐变和线性渐变没有什么区别。
1.角度
渐变的角度，0°到360°，也可以是正数。 默认值为 180 度。 除了deg可以表示角度外，turn、grad、rad也可以表示角度。 例如，一整圈360deg=1圈。
2. 侧面或角落
使用方向来表示角度，例如，向顶部表示 0 度css3 背景颜色渐变，向底部表示 180 度，向右表示 90 度，向左表示 270 度。 其实就是y轴顺时针旋转。
您还可以使用 to left top 来表示从右下角到左上角的对角线。 到左下意味着从右上角到左下角的对角线。 默认是从上到下。
3.色停
由颜色和位置组成。
颜色是必需的值，位置可以是固定像素值或百分比值。 多种颜色用冒号分隔。
例如：#ff8 50%、rgba(255,255,255, .6) 120px、透明12%等。
其实重复渐变有点像PS上的填充图案。 定义一个图案作为基本单元，然后将其平铺在一个区域上，以达到重复的目的。
二、案例
1、两种颜色组成一个基本单位，第一种颜色从0开始，第二种颜色占据容器高度的10%。 所以容器高，渐变条就高css3 背景颜色渐变，变化与容器的高度一致。
HTML：
CSS：
html,body{
height:100%;
}
body{
background: repeating-linear-gradient(#a18cd1, #fbc2eb 10%);
}
效果图：
三种颜色构成一个单元，再加上角度。
HTML：
CSS：
html,body{
height:100%;
}
body{
background: repeating-linear-gradient(45deg,#3f87a6, #ebf8e1 15%, #f69d3c 20%);
}
效果图：
2.颜色可以固定在特定位置。 当结束颜色的位置与下一个开始颜色的位置相同，但颜色值不同时，可以形成非常刚性的过渡。 如果两种不同颜色之间的距离越大，渐变就越柔和。 当颜色单元的高度固定时，高度不会随着容器的大小而变化，而只是瓦片的数量发生变化。
HTML：
CSS：
html,body{
height:100%;
}
body{
background: repeating-linear-gradient(#ff9a9e, #fad0c4 40px,#eee 40px, #eee 50px);
}
效果图：
3.添加角度和rgba透明度的变化
HTML：
CSS：
html,body{
height:100%;
}
body{
background: repeating-linear-gradient(45deg,#e1e1e1, #e1e1e1 10px,#fff 10px, #fff 20px);
}
.box{
width:300px;
height:300px;
margin:10px auto;
background:repeating-linear-gradient(-45deg,rgba(50,185,181,.5),rgba(50,185,181,.5) 10px,rgba(255,255,255,.5) 10px,
rgba(255,255,255,.5) 20px);
}
效果图：
4、可以直接用transparent来表示透明度。
HTML：
CSS：
html,body{
height:100%;
}
.box{
width:300px;
height:260px;
margin:20px auto;
background: repeating-linear-gradient(transparent,transparent 10px, rgba(245,219,203,.5) 10px, rgba(245,219,203,.5)
20px), url(images/fengjing.jpg);
}
效果图：
5. 结合多种背景和透明度可以达到丰富的疗效
CSS：
html,body{
height:100%;
}
body{
background:repeating-linear-gradient(0.125turn, transparent, #a18cd1 40px),repeating-linear-gradient(-0.125turn ,
transparent, #fbc2eb 40px);
}
效果图：
又一次疯狂地提到上帝
CSS：
html,body{
height:100%;
}
body{
background: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5)
10px,hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
}
效果图：
发表评论