神奇的CSS技巧探秘——CSS绘制条纹背景

一、横向条纹

如下代码：

background: linear-gradient(#fb3 20%, #58a 80%)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:

background: linear-gradient(#fb3 50%, #58a 50%);

接下来可以通过设置背景的大小，让背景高度变小并且背景默认为repeat，从而出现条纹状

background: linear-gradient(#fb3 50%, #58a 50%);

background-size: 100% 30px;

我们可以不设定第二个颜色的起始位置，设置为0，则浏览器默认为接着上一个颜色开始：

background: linear-gradient(#fb3 30%, #58a 0);

background-size:100% 30px;

这样就形成了一个黄色占30%蓝色占70%的条纹状背景

也可以设置多种颜色，下面设置了三种颜色的条纹：

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);

background-size: 100% 45px;

二、竖向条纹

只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size:30px 100%;