形形色色的条纹元素在网页上的运用广泛，至少和一些从杂志到壁纸的视觉设计一样无处不在，然而，在工作中我们完成条纹背景并不理想。通常，通常我们会制作一个展开的位图，我们每次需要做一些改变时都需要再次编辑图片。有些可能用SVG（可缩放矢量图形）代替，但始终是一个独立的文件，并且语法并不是很友好。
秉承DRY（Don't repeat yourself）的精神，我们可以直接用CSS制作条纹。
（1）水平条纹
background: linear-gradient(#fb3, #58a);
background-size: 100% 30px;
background-repeat: no-repeat;
background: linear-gradient(#fb3 20%, #58a 80%);
background-size: 100% 30px;
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;（2）垂直条纹
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;（3）斜纹
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
background: linear-gradient(45deg,
#fb3 25%, #58a 0,
#58a 50%, #fb3 0,
#fb3 75%, #58a 0);
background-size: 30px 30px;（4）更好的斜纹
上面设置斜纹的方式弹性不够好，如果我们需要的不是45度，而是其他角度，仅仅改变角度是得不到想要的效果的；少有人知道linear-gradient还有平铺版repeating-linear-gradient，实现方式一样，只是颜色会平铺，直至铺满整个图片。
使用repeating-linear-gradient的好处有：1）减少重复：我们改变任何一种颜色只需要改两处，而不是三处。2）可以方便修改不同角度，无需考虑条纹的无缝连接。
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
height：100%;
background: repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
height:100%;（5）灵活的细微条纹
很多情况下，我们的条纹不是完全不同的颜色，而是有着细微的差别的相近颜色。然而，这种联系不是特别容易通过RGB颜色看出来；更进一步地，如果我们想改变基色，我们需要修改四处地方。
background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);
height:100%;
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
height: 100vh;除了上述简单的条纹图案外，CSS3还能实现如网格，波尔卡圆点，棋盘等更加复杂的图案。
点击这里CSS3 Patterns Gallery，你会惊叹CSS3的神奇！
下面只介绍一些相对简单常见的背景图案实现方式。
（1）网格
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;（2）波卡尔圆点
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;（3）棋盘
细微的棋盘图案可以作为一个不愠不火的纯色背景。用CSS制作棋盘图案比我们所期望的棘手一些。
具体实现的探索思路有点复杂，这里就略过了，只列出最后结果。
background: #eee;
background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
background: #eee url('data:image/svg+xml,
');
background-size: 30px 30px;另：
- 用CSS3的合成混合模式，即通过设置属性background-blend-mode可以制作出多样的图案：New CSS gradient possibilities with the background-blend-mode property
- 在线小工具：可以查看CSS代码块的大小Find out the size of a piece of text
