背景与边框--条纹背景

条纹背景

相关内容：CSS线性渐变、background-size

在视觉设计中，各种尺寸、颜色、角度的条纹图案无处不在。如果想在网页中实现条纹图案，过程比较复杂，通常先创建一个位图文件，
每次需要做调整时都使用图像编辑软件来修改。有人试过用SVG来取代位图，但这样还是会有一个独立的文件，而且SVG语法不够友好。

CSS解决方案

一条基本的垂直线性渐变，从#fb3到#58a

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

一条基本的垂直线性渐变，从#fb3到#58a

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

色标拉近，顶部20%填充，底部80%填充，中间60%才是渐变

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

色标重合，无任何渐变效果

如果多个色标具有相同位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置产生突变，而不是一个平滑的渐变过程。

渐变是一种由代码生成的图像，因此可以像对待其他任何背景图像那样，还可以通过background-size来调整其尺寸：

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

两条条纹高度缩小到15px

背景默认重复平铺，故上述容器已经自动填满

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

通过调节色标创建不等宽条纹

为了避免每次改动条纹宽度要修改两个数字，可以再次从CSS规范处寻找捷径：

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

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

如上，第二个色标位置值可以设为0，它的位置总会被调整为前一个色标的位置值

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

三种颜色的水平条纹

垂直条纹

与水平条纹的差别：需要在开头增加一个额外参数来指定渐变方向（水平条纹代码中其实包含默认值to bottom故省略），最后还需点到background-size值

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

垂直条纹，额外添加参数to right(或90deg)

斜向条纹

background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

调节角度，尝试失败。仅仅将贴片内部渐变旋转了45度

回忆到用位图来生成斜向条纹时，是单个贴片包含四条条纹，而不是两条，只有这样才能做到无缝拼接，这就是在CSS中重新实现贴片时所需要的，因此需要增加一些色标：

background: linear-gradient(45deg,
                #fb3 25%, #58a 0,
                #58a 50%, #fb3 0,
                #fb3 75%, #58a 0);
background-size: 30px 30px;

这些条纹看起来要比前面的细。

更好的斜向条纹

设置更多角度的斜向条纹，通过使用linear-gradien和radial-gradient的循环式的加强版API：repeating-linear-gradient和repeating-radial-gradient。工作方式类似前者，唯一一点不同：色标无线循环重复，直到填满整个背景。

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

一个重复线性渐变图案

等效于如下设定：

background: linear-gradient(45deg,
                #fb3, #58a 3px0,
                #fb3 30px, #58a 60px,
                #fb3 60px, #58a 90px,
                #fb3 90px, #58a 120px,
                #fb3 120px, #58a 150px,
                ...);

使用该API来设定前面的渐变就十分容易了

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

简洁实现

减少了重复，改动任何颜色时只需要修改两处，而不用原来的三处，另外现在是在渐变的色标中指定长度，而不是在原来的background-size中，直接代表条纹自身宽度，长度值更加直观。

最大的好处是现在可以随心所欲改变渐变角度了指哪打哪，再也不用去思索生成无缝贴片。

background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

轻松实现60度条纹

灵活的同色系条纹

大多数情况我们想要的条纹图案组成往往属于同一色系，只在明度方面有轻微差异，如下：

background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

蓝色和其浅色变体组成的条纹

但如果想要改变这个条纹的主色调，仍需要修改四处。还有更加安排的方法，把最深的颜色指定位背景色，同时把半透明白色条纹叠加在背景色之上得到浅色条纹：

background: #58a;
background-image: repeating-linear-gradient(30deg,
                    hsla(0, 0%, 100%, .15),
                    hsla(0, 0%, 100%, .15) 15px,
                    transparent 0, transparent 30px);

蓝色和其浅色变体组成的条纹

CSS4新增的简化语法

background: #58a;
background-image: repeating-linear-gradient(30deg,
                    hsla(0, 0%, 100%, .15) 0 15px,
                    transparent 0， 30px);

CSS4新增的简化语法:在同一个色标上指定两个位置值