垂直条纹

水平条纹是最容易用代码写出来的，但用户在网页上看到的条纹图案很多都不是水平的。

有些条纹是垂直的（如图1-1），而且某些形态的斜条纹或许更受欢迎，看起来更有趣。

幸运的是，CSS 渐变同样也能帮助我们创建出这些效果，只是难度稍有不同。

垂直条纹的代码跟水平条纹几乎一样的，主要区别在于：我们需要在开头加上一个额外的参数来指定渐变的方向。

在水平条纹的代码中，我们其实也可以加上这个参数，只不过它的默认值 to bottom 本来就跟我们的意图一致，于是就省略了。最后，我们还需要把 background-size 的值颠倒一下。

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

图1-1

斜向条纹

在完成了水平和垂直条纹后，我们继续思考：如果再次改变 backgroun-size 的值和渐变的方向，是不是就可以得到斜向（比如45度）的条纹图案呢？（如图1-2）

图1-2

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

可以发现，这个办法行不通。

原因在于：我们只是把每个“贴片”内部的渐变旋转 45 度，而不是把整个重复的背景都旋转了。

试着回忆一下，我们以前用位图来生成斜向条纹时是怎么做的？

做法类似 （图1-3），单个贴片包含了四条条纹，而不是两条，只有这样才有可能做到无缝拼接。它正是我们需要在 CSS 代码中重新实现的贴片，因此我们需要增加一些色标。

图1-3

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

如图1-4所见，我们成功创建了斜向条纹，但是这些条纹看起来比前面制作的水平条纹和垂直条纹更细一些。

为了理解其中的缘由，我们需要回忆勾股定理，计算直角三角形的斜边：一个直角三角形。

图1-4

幸运的是，linear-gradient() 和 radial-gradient() 还各有一个循环式的加强版：repeating-linear-gradient() 和 repeating-radial-gradient()。

它们的工作方式跟前两者类似，只是色标是无限循环重复的，直到铺满整个背景。下面是一个重复渐变的例子（图1-5）

图1-5

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

重复线性渐变完美适用于条纹效果，这得益于它可以无限循环色标。

现在就可以随心所欲地改变渐变的角度了，但是请注意，在这个方法中，不论是什么角度，我们都需要用到四个色标。

这意味着，水平和垂直条纹还是用原来的方法——斜向条纹来实现。

灵活的同色系条纹

在多数情况下，我们想要的条纹都不是由差异极大的颜色组成的，而是属于同一色系的，在透明度上有一些差异的颜色，例如图1-6。

图1-6

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

在图中我们可以看到，条纹是由一个主色调 #58a 和它的浅色变体组成的。

但是，这两种颜色之间的关系在代码中并没有体现出来，如果我们想要改变这个主色调，需要修改四处。

幸运的是，有一种更好的方法：不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明色的条纹叠加在背景色之上来得到浅色条纹。

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

现在，我们只需要修改一个地方就可以改变所有颜色了。

以上就是本期使用 CSS 创建垂直、斜向、同色系等不同条纹背景的实践分享，希望对大家有帮助。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！