使用CSS3设置条纹背景

系列文章目录

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创建条纹图案的全部内容。