css 世界之条纹背景

水平与垂直条纹

线性渐变 linear-gradient

需求：
采用 css 实现个横向与纵向的条纹背景，类似如下：

横向条纹

首先我们都知道 linear-gradient 属性是用来实现线性渐变的，比如

background:linear-gradient(blue,red);

可以看到颜色从蓝色过渡到了红色。

通过给这颜色加上终止位置，就可以限制渐变的范围。比如：

background:linear-gradient(blue 20%,red 80%);

可以看到顶层的 20% 区域被填充为蓝色实色，底部 20% 被填充为红色实色。真正的渐变范围只出现在 20% 到 80% 之间。

那么如何将两个终止位置无限靠近，乃至相同，会有怎样的效果呢？

background:linear-gradient(blue 50%,red 50%);

可以看到各占容器的一半。

实际上渐变是一种由代码生成的图像，所以我们能像对待其他任何背景图像那样对待它，自然也就可以通过 background-size 来调整其尺寸：

background: linear-gradient(blue 50%, red 50%);
background-size: 100% 40px;

两条条纹高度都缩小到了 20px, 由于背景在默认情况下是重复平铺的，所以整个容器就会被填满了水平条纹。

这样就实现最上面的纵向条纹背景需求。
用同样的方法也可以创建不等宽的条纹，只需调整色标的位置值即可：

background: linear-gradient(blue 30%, red 30%);
background-size: 100% 40px;

那么要如何实现超过两种颜色的条纹呢？实际上在渐变里多加种颜色即可，比如：

background: linear-gradient(
        blue 33.3%,
        red 33.3%,
        red 66.6%,
        green 66.6%
);
background-size: 100% 60px;

其实可以再优化下代码：

现在代码里的位置值有些是一样的，这样每次改动条纹宽度时就得修改好几处地方。

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值
这意味着，如果我们将后面色标的位置值设置为 0 ,那它的位置就总是会被浏览器调整为前一个色标的位置值。

比如分别可以将上面的代码优化成如下：

background: linear-gradient(blue 30%, red 0);
background-size: 100% 40px;

background: linear-gradient(
        blue 33.3%,
        red 0,
        red 66.6%,
        green 0
);
background-size: 100% 60px;

垂直条纹

介绍完水平条纹，垂直条纹就很好理解了。

垂直条纹跟水平条纹的实现差不多，差别主要在于：我们要在开头加上一个额外的参数来指定渐变的方向。

在水平条纹中，其实也可以加上这个参数，只不过默认值就是 to bottom, 所以就没必要加。

另外别忘了将 background-size 的值颠倒一下，因为这个时候是高度 100%, 宽度要平铺。

width: 200px;
height: 200px;
background: linear-gradient(to right, blue 50%, red 50%);
background-size: 40px 100%;

这样就实现了开头说的水平条纹。