不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。要想在网页中实现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。可能有人试过用 SVG 来取代位图，但这样还是会有一个独立的文件，而且它的语法也远远不够友好。如果可以直接在 CSS 中创建条纹图案，那该有多棒啊！你可能会惊讶地发现，我们居然真的可以。
解决方案
假设我们有一条基本的垂直线性渐变，颜色从 #fb3 过渡到 #58a（参见图 1）：
这是一个示例 (图1)
渐变现在出现在总高的 60% 区域，剩下的部分显示为实色；色标的位置用虚线标示出来了
background: linear-gradient(#fb3, #58a);
现在，让我们试着把这两个色标拉近一点（参见图 2）：
这是一个示例 (图2)
background: linear-gradient(#fb3 20%, #58a 80%);
现在容器顶部的 20% 区域被填充为 #fb3 实色，而底部 20% 区域被填充为 #58a 实色。真正的渐变只出现在容器 60% 的高度区域。如果我们把两个色标继续拉近（分别改为 40% 和 60%，参见图 3），那真正的渐变区域就变得更窄了。你是不是开始好奇，如果我们把两个色标重合在一起，会发生什么？
这是一个示例 (图3)
background: linear-gradient(#fb3 50%, #58a 50%);
“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。” ——CSS 图像（第三版）（http://w3.org/TR/css3-images） 你在图 3 中可以看到，已经没有任何渐变效果了，只有两块实色，各占据了 background-image 一半的面积。本质上，我们已经创建了两条巨大的水平条纹。 因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸：
这是一个示例 (图4)
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
在图 24 中可以看到，我们把这两条条纹的高度都缩小到了 15px。由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹（参见图 4）。 我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值即可（参见图 5）：
这是一个示例 (图5)
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
为了避免每次改动条纹宽度时都要修改两个数字，我们可以再次从规范那里找到捷径。 “如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。” ——CSS 图像（第三版）（http://w3.org/TR/css3-images） 这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。 因此，下面的代码会产生跟图 5 完全一样的条纹背景，但代码会更加DRY：
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
如果要创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代码可以生成三种颜色的水平条纹（参见图 6）：
这是一个示例 (图6)
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
垂直条纹 水平条纹是最容易用代码写出来的，但我们在网页上看到的条纹图案并不都是水平的。有些条纹是垂直的（参见图 7），而且某些形态的斜条纹或许更受欢迎，或者看起来更加有趣。幸运的是，CSS 渐变同样也能帮助我们创建出这些效果，只是难度稍有不同。 垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于：我们需要在开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我们其实也可以加上这个参数，只不过它的默认值 to bottom 本来就跟我们的意图一致，于是就省略了。最后，我们还需要把 background-size 的值颠倒一下，原因应该不用多说了吧：
这是一个示例 (图7)
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
斜向条纹 在完成了水平和垂直条纹之后，我们可能会顺着往下想：如果我们再次改变 background-size的值和渐变的方向，是不是就可以得到斜向（比如45°）的条纹图案呢？比如这样（结果如图 8 所示）：
这是一个示例 (图8)
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
可以发现，这个办法行不通。原因在于我们只是把每个“贴片”1①内部的渐变旋转了 45°，而不是把整个重复的背景都旋转了。试着回忆一下我们以前用位图来生成斜向条纹时是怎么做的吧，做法类似图 9。单个贴片包含了四条条纹，而不是两条，只有这样才有可能做到无缝拼接。它正是我们需要在 CSS 代码中重新实现的贴片，因此我们需要增加一些色标：
这是一个示例 (图9)
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
我们可以在图 9 中看到结果。如你所见，我们成功地创建了斜向条纹，但这些条纹看起来要比我们在前面制作的水平和垂直条纹细一些。为了理解这其中的道理，我们需要再次回忆起在学校里学过的勾股定理，用它来计算直角三角形的斜边长度。这个定理表示，当 a 和 b 是直角三角形的直角边时，则斜边的长度等于 
。对于一个 45°的直角三角形来说，它的两条直角边是等长的，因此这个算式会变成
=a
。在我们的斜向条纹中，背景尺寸指定的长度值决定了直角三角形的斜边长度，但条纹的宽度实际上是直角三角形的高。在图 10 中可以看到图形化的解释。 这意味着，如果想让条纹的宽度变化为我们原本想要的 15px，就需要把 background-size 指定为 2x 15 ≈ 42.426 406 871 像素：
这是一个示例 (图10)
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;
你可以在图 10 中看到最终效果。但是，除非有人拿枪顶着你的脑袋威胁你必须把斜向条纹的宽度设置为完全精确的 15 像素，我会强烈推荐你把这一长串数字取整，写成 42.4px，或者甚至是 42px。（当然，在上述情形之下，你还是会被干掉。因为 不是整数，我们最终得到的条纹宽度永远都只能是一个近似值——尽管它已经相当精确了。）
更好的斜向条纹
在前面的段落中展示的方法还不够灵活。假设我们想让条纹不是 45°而是 60°怎么办？或者是 30°？又或者是 3.141 592 653 5°？如果我们只是把渐变的角度改一下，那么结果看起来会相当糟糕。（比如在图 10 中，我们尝试实现 60°条纹，但以失败告终。） 幸运的是，我们还有更好的方法来创建斜向条纹。一个鲜为人知的真相是 linear-gradient() 和 radial-gradient() 还各有一个循环式的加强版：repeating-linear-gradient() 和 repeating-radial-gradient()。它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。下面是一个重复渐变的例子（效果参见图 10）：
这是一个示例 (图10)
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
相关阅读
CSS 图像 http://w3.org/TR/css-images CSS 背景与边框 http://w3.org/TR/css-backgrounds CSS 图像（第四版） http://w3.org/TR/css4-images
