漂亮条纹炼成笔记进阶篇

条纹绝对是永恒的经典，不管是装修还是服装，条纹元素总是会若有若无的穿插其中。当条纹和妹子们在一起的时候，就不是单纯的可爱那么简单了，有时候甚至隐隐约约中透露着一种性感和诱惑。

条纹袜的诱惑

如果你看的很仔细会发现其实上图是个充气娃娃，嘿嘿~先收收口水，我在《漂亮条纹炼成笔记入门篇》中，简单介绍了关于如何使用CSS来实现条纹的方法。今天在进阶篇里面我会根据自己经验来介绍更复杂的条纹实现方法。装B开始……

装B开始

通过上篇文章，介绍了水平条纹和垂直条纹了实现方式。在文章的末尾我还提出了一个问题，就是用什么方法实现不同角度的斜向条纹。可能你觉得很简单，其实我也是这么认为。我们可以通过linear-gradient的参数来设置条纹的方向。参数可以是关键字也可以是自定义角度（deg）。既然如此就着手来修改代码，首先是修改倾斜角度，然后修改background-size的值来使条纹出现在固定的区间内。然后所有的小区间就能汇总成一个大大的斜向条纹（假设如此）。

/*斜向条纹CSS代码*/
background:linear-gradient(45deg,  #19C  50%,#c60  50%);
background-size:30px  30px;

看看结果是不是和我们的想象是一致的。

什么鬼？

说好的斜向条纹怎么变成这个样子了？原因就是旋转的目标是background-size控制的小区域旋转了45°，而不是整个重复的背景旋转了45°。如果来解决这个问题，我们打开Photoshop来做个试验。通过添加条纹然后进行旋转，我们仔细观察。如果需要在一个单位内包含所有条纹的状态，那么在这个单位内必须有四条，而非上面我们设置的两条。

平铺斜向条纹单位面积包含所有状态条纹需要四条

既然已经知道了错误出现的原因，那么我们来改造代码：

/*改造后斜向条纹CSS代码*/
background:linear-gradient(45deg,
             #eee  25%,  #111  0,
             #111  50%,#eee  0,
             #eee  75%,#111  0);
background-size:30px  30px;

斜向45度条纹

这种情况下条纹的实际宽度比我们预想的宽度会细一些，原因是我们设置的条纹高度变成了background-size控制区域的边长的一半。而我们条纹的宽度实际上是所处三角形的高。这样我们必须通过“勾股定理”来计算出三角形两条斜边的长，然后乘以2之后的结果才是background-size的需要具体设置的值。

勾股定理算出边长

我们可以用四条纹转方向之后再拼接小区块来实现整体的斜向条纹，如果我们需要的不是45°的斜向条纹，而是60°、75°或者是5.12°的时候，使用这种方法看看能不能满足我们的需求。

/*不定角度的斜向条纹CSS代码*/
background:linear-gradient(72deg,
         #eee  25%,  #111  0,
         #111  50%,#eee  0,
         #eee  75%,#111  0);
  background-size:30px  30px;

结果大失所望

失败的72°斜向条纹 哭死

完全不是我们想要的样子啊，怎么办难道还需要Photoshop的协助，然后看看具体旋转的角度需要用多大的区块来包裹。还要进行头晕的数学计算。不对这不是我想要的，我是一个喜欢偷懒的懒人，这么复杂的东西我看一眼都觉得累。天无绝人之路，非常幸运的是还有一个隐藏了很深的CSS属性可以帮我们解决这个“任意角度斜向条纹”的问题。

linear-gradient线性渐变和radial-gradient径向渐变都有一个循环加强版:repeating-linear-gradient和repeating-radial-gradient。这俩货可是了不得啊，它们的使用方法和“低配版”类似，不同的是：色标是无限循环重复，直到填满整个背景。

“循环加强版”的色标无限循环重复代表的是什么意思呢？看下列代码：

/*repeating-linear-gradient代表的渐变*/
background:repeating-linear-gradient(72deg,
        #eee  0,  #111  30px);

/*linear-gradient代表的渐变*/
background:linear-gradient(72deg,
       #eee  0,  #111  30px，
      #eee  30px,  #111  60px，
      #eee  60px,  #111  90px,
      #eee  90px,  #111  120px，
      #eee  120px,  #111  150px,……); /*循环直到铺满背景*/

//两者是一样的

重复线性渐变repeating-linear-gradient的无限循环“技能”，可以让一个渐变图案自动重复并铺满整个背景，这样可以完美的帮我们实现任意角度斜向条纹。我们不用再去考虑如何无缝拼接的小区域贴片了。对于渐变来说是以整个元素的范围进行填充，在这种情况下background-size就可以下场休息了。

我们只需简单的在色标中指定长度即可，什么“勾股定理”根号计算都见鬼去吧。如果代码需要修改我们只需修改寥寥几处即可，而不是以前那种需要修改许多处。最大的好处就是可以随心所欲的指定任意角度的斜向条纹。下面来感受下这货的威力吧：

/*循环加强版的线性渐变*/
background:repeating-linear-gradient(72deg,#eee  0,#eee  15px,#111  0,#111  30px);

重复渐变生产斜向条纹

还真是轻松加easy啊，我们还可以试验下其他的奇葩角度：

重复线性渐变实现奇葩角度条纹

指哪打哪啊，这感觉爽的不要不要的。不过需要注意的是通过这种方法来创建双色条纹，至少需要四个色标。如果我们需要的是水平和垂直条纹，那么就可以用前面的方法；需要任意角度的斜向条纹就用这种方法；需要的是特殊角度的斜向条纹，就需要本篇开头的方法或是将重复线性渐变和“贴片区块”混合使用。

如果想要把我喜欢的黑白条纹换成红色和玫红，或是蓝色和浅蓝，还要改4个色标的色值。修改四处地方，头疼啊~有没有办法让我们修改一处就能全部都修改了呢？估计在你脑海中已经冒出来了Sass/Less/Stylus或CSS变量等等方法。

打住一下，在我的文章《你真的理解CSS属性简写的意义吗》中，对于可以“设置多重”效果的属性，例如：background、box-shadow有一个很重要的规则，叫做“列表扩散”。我们可以利用这个来让我们的代码变成只需要修改一处地方，就能修改全部颜色的强壮CSS代码。当然这里面还需要一点关于颜色的知识，这里我权当你已经掌握这些知识了。

/*利用列表扩散来让代码更具可读性*/

  background:#000;  /*设置背景颜色*/
  background-image:repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.8)  0,
    hsla(0,0%,100%,.8)  15px,
    transparent  0,
    transparent  30px);  /*覆盖属性*/

利用列表扩散来让代码更具可读性

嘿嘿，来看看修改最开始处的颜色，全部条纹都发生变化的威力吧。不过这里要了解一点hsla颜色的知识才行。其实也可以用rgba颜色来控制。

这一刻我的内心是这样的↓↓↓↓

得意的笑啊

最后插播一句关于重复线性渐变属性的“民意支持率”。

image

建议还是做好“平稳退化”的措施。实在不行就用图片来解决吧，关于一些知识不理解的可以百度或是出门右转，看《漂亮条纹炼成笔记入门篇》。完了-bye~

(报告完毕！)