CSS3重复渐变（线性和径向渐变）

1.标准语法：

background-image:repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);//重复线性渐变

background-image:repeating-radial-gradient(red,green 40px, orange 80px);//重复径向渐变

2.利用重复渐变制作记事本纸张效果

html,
body{
margin:0;padding:0;
height:100%;
}
body{
background-image:-webkit-repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
background-image:repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
/*指定背景图片大小，关键点！*/
background-size: 100% 30px;
position: relative;
}
/*伪类制作竖线*/
body:before{
content:'';
display: inline-block;
height:100%;
width:4px;
border-left:4px double #fca1a1;
position:absolute;
left:30px;
}

3.利用重复渐变制作纹理效果

html,
body{
margin:0;padding:0;
height:100%;
}
body{
background-image:linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent);
/*指定背景图片大小，关键点！*/
background-size:50px 50px;
background-color: red;//按需要改动背景色
}

4. 平滑过渡渐变和突然过渡渐变：

.box{
width:200px;height:200px;
border:1px solid #000;float:left;
/*突然过渡：在过渡颜色附近多加一处颜色值来实现突然过渡效果*/
background-image:linear-gradient(top,red 0,red 50%,green 50%);
}

.box2{
width:200px;height:200px;
border:1px solid #000;float:left;
/* 平滑过渡*/
background-image:-webkit-linear-gradient(top,red 0,green 50%);
}