详解CSS制作Web页面条纹背景样式的技巧

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);  

通过这种方式可以任意更改角度，而不会出现上中方法中的调节困难
background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);
(这种方法其实相当于将size的控制和gradient的控制合到了一起)
 
五、关于颜色的设定
有时我们希望条纹背景的颜色之间是相近的颜色，但是如果手动设定这个颜色的#很不方便，也很难发现要选择什么样的颜色。可以使用如下方法：

CSS Code复制内容到剪贴板

background: #58a;     
background-image: repeating-linear-gradient(30deg,     
hsla(0,0%,100%,.1),     
hsla(0,0%,100%,.1)15px,     
transparent 0,transparent 30px);    

这种方法的原理是：指定背景中最深的颜色，条文中其他相近色用透明度进行调整

六、综合实例
这里效果图一起放上来了，与下面的样式一一对应：

CSS Code复制内容到剪贴板

.stripes {   
    height: 250px;   
    width: 375px;   
    float: left;   
       
    margin: 10px;   
       
    -webkit-background-size: 50px 50px;   
    -moz-background-size: 50px 50px;   
    background-size: 50px 50px; /* 控制条纹的大小 */  
       
    -moz-box-shadow: 1px 1px 8px gray;   
    -webkit-box-shadow: 1px 1px 8px gray;   
    box-shadow: 1px 1px 8px gray;   
}  

CSS Code复制内容到剪贴板

.horizontal {   
    background-color: #0ae;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);