漂亮条纹炼成笔记进阶篇漂亮条纹炼成笔记进阶篇

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

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

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

/*斜向条纹CSS代码*/ background:linear-gradient(45deg,#19C50%,#c6050%); background-size:30px30px;

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

文章图片
什么鬼？

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

文章图片
平铺斜向条纹单位面积包含所有状态条纹需要四条既然已经知道了错误出现的原因，那么我们来改造代码：

/*改造后斜向条纹CSS代码*/ background:linear-gradient(45deg, #eee25%,#1110, #11150%,#eee0, #eee75%,#1110); background-size:30px30px;

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

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

/*不定角度的斜向条纹CSS代码*/ background:linear-gradient(72deg, #eee25%,#1110, #11150%,#eee0, #eee75%,#1110); background-size:30px30px;

结果大失所望

文章图片
失败的72°斜向条纹

文章图片
哭死完全不是我们想要的样子啊，怎么办难道还需要Photoshop的协助，然后看看具体旋转的角度需要用多大的区块来包裹。还要进行头晕的数学计算。不对这不是我想要的，我是一个喜欢偷懒的懒人，这么复杂的东西我看一眼都觉得累。天无绝人之路，非常幸运的是还有一个隐藏了很深的CSS属性可以帮我们解决这个“任意角度斜向条纹”的问题。
linear-gradient线性渐变和radial-gradient径向渐变都有一个循环加强版:repeating-linear-gradient和repeating-radial-gradient。这俩货可是了不得啊，它们的使用方法和“低配版”类似，不同的是：色标是无限循环重复，直到填满整个背景。
“循环加强版”的色标无限循环重复代表的是什么意思呢？看下列代码：

/*repeating-linear-gradient代表的渐变*/ background:repeating-linear-gradient(72deg, #eee0,#11130px); /*linear-gradient代表的渐变*/ background:linear-gradient(72deg, #eee0,#11130px， #eee30px,#11160px， #eee60px,#11190px, #eee90px,#111120px， #eee120px,#111150px,……); /*循环直到铺满背景*///两者是一样的

重复线性渐变repeating-linear-gradient的无限循环“技能”，可以让一个渐变图案自动重复并铺满整个背景，这样可以完美的帮我们实现任意角度斜向条纹。我们不用再去考虑如何无缝拼接的小区域贴片了。对于渐变来说是以整个元素的范围进行填充，在这种情况下background-size就可以下场休息了。
我们只需简单的在色标中指定长度即可，什么“勾股定理”根号计算都见鬼去吧。如果代码需要修改我们只需修改寥寥几处即可，而不是以前那种需要修改许多处。最大的好处就是可以随心所欲的指定任意角度的斜向条纹。下面来感受下这货的威力吧：

/*循环加强版的线性渐变*/ background:repeating-linear-gradient(72deg,#eee0,#eee15px,#1110,#11130px);

文章图片
重复渐变生产斜向条纹还真是轻松加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, transparent0, transparent30px); /*覆盖属性*/