系列文章目录
CSS3实现半透明边框（1）
CSS3实现多重边框（2）
CSS3如何调整背景图片大小（3）
CSS3背景定位（4）
前言
我们在编写网页中如果想使用条纹图案作为背景。一种方案是：使用svg等图片当背景，但是这样会多一个独立的文件。另一种方案是：我们可以使用CSS创建条纹图案背景。
一、水平条纹
首先创建一条垂直的线性渐变色.
代码：
background: linear-gradient(greenyellow 30%,skyblue 70%);
效果：
当设置50%与50%时，即如果色标具有相同位置的时候，会产生个无限小的过渡区域，从效果上看，颜色会在位置上突然变化，而不是一个平滑的渐变过程。
代码：
background: linear-gradient(greenyellow 50%,skyblue 50%);
效果：
这时，已经没有渐变的效果了，只有两个色块各占据了背景的一半面积，由于背景是默认重复平铺色，所以只要设置background-size属性，就可产生水平条纹背景。 background-size: 100% 50px设置两个色块分别为25px长度
代码：
background: linear-gradient(greenyellow 50%,skyblue 50%);
background-size: 100% 50px;
效果：
不等宽的条纹
只需要调整色标的位置值即可：
代码：
background: linear-gradient(greenyellow 30%,skyblue 30%);
background-size: 100% 50px;
效果：
提示：linear-gradient中如果某个色标位置值，比在它之前的整个列表中色标的位置值都要小，则这个色标的位置会被设置为它前面所有色标位置值的最大值。
上述代码改为：
background: linear-gradient(greenyellow 30%,skyblue 0);
background-size: 100% 50px;
会产生和上图一样的条纹背景。
多条纹背景
产生三种颜色的水平条纹
效果：
background: linear-gradient(greenyellow 33%,skyblue 0,skyblue 66%,yellowgreen 0);
background-size: 100% 50px;
效果：
二、垂直条纹
垂直条纹的代码跟水平条纹很相似，除了我们需要在开头加上一个额外的参数去指定渐变方向，然后把backgroud-size的值调换一下：
效果：
background: linear-gradient(90deg,/*或to right*/
greenyellow 50%,skyblue 0);
background-size:50px 100%;
代码：
三、斜向条纹
效果：
background: linear-gradient(45deg,greenyellow 25%,skyblue 0,
skyblue 50%,greenyellow 0,
greenyellow 75%,skyblue 0);
background-size:50px 50px;
代码：
四、角度更多的条纹
如果不光想要45度的条纹，而是想要60度，30度或者其他的奇奇怪怪的角度呢？
linear-gradient（）有一个循环加强版即：repeating-linear-gradient（）工作方式与前置类似，但是色标是无限循环重复的直到填满整个背景。
效果：
background:repeating-linear-gradient(60deg,greenyellow,greenyellow 25px,
skyblue 0,skyblue 50px)
代码：
有了repeating-linear-gradient，简单到只要改角度就可以实现了，上述说的45度可以写成：
background:repeating-linear-gradient(45deg,greenyellow,greenyellow 25px,
skyblue 0,skyblue 50px)
但是，无论条纹的角度如何，使用此方法时创建的双色条纹都需要使用四个色标。所以在创建水平或者垂直条纹的时候，最好还是使用前两种方式去创建。
总结
以上就是可以不使用svg等图片，通过CSS创建条纹图案的全部内容。