条纹背景，垂直条纹，斜向条纹，灵活的背景条纹

目录

一、垂直条纹

二、斜条纹

三：背景条纹灵活

---

一、垂直条纹

垂直条纹的代码与水平条纹几乎相同。不同之处在于，我们需要在开头添加额外的参数来指定渐变方向。默认情况下 to buttom

效果展示：

代码段 ：

                      、            
      
  

二、斜条纹

垂直条纹完成后，我们可以想到我们会改变background-size倾斜条纹的值和渐变方向

效果展示：

代码段 ：

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

可以看出，这种方法不起作用，因为我们只是旋转每个贴片内部的渐变45°，而不是旋转整个背景，只要每个贴片包含四条条纹，就可以无缝连接

效果展示：

代码段 ：

 div {             height: 200px;             width: 500px;             background: linear-gradient(45deg,                     #fb3 25%, #58a 0,                     #58a 50%, #fb3 0,                     #fb3 75%, #58a 0);             background-size: 30px 30px;         }

我们可以在上图中看到结果。正如你所看到的，我们成功地创建了斜条纹，但它们看起来比我们在前面制作的水平和垂直条纹更薄。为了理解真相，我们需要回忆起我们在学校学到的东西勾股定理，用它来计算直角三角形的斜边长度。这个定理表明，当a和b当是直角三角形的直角边时，斜边的长度等于√a b2。对于一个 45°就直角三角形而言，它的两个直角边是等长的，所以这个算法会变成√2a =av2。背景尺寸指定的长度值决定了直角三角形的斜边长度，但条纹的宽度实际上是直角三角形的高度。图形化的解释可以在下图中看到。
这意味着，如果我们想把条纹的宽度变成我们想要的15px，就需要把background-size指定为2×15√2 ～ 42.426 406 871像素:

在上图中可以看到最终效果。然而，除非有人用枪威胁你必须将斜条纹的宽度设置为完全准确的15像素，否则我强烈建议你把这个长串数字写成42.4px，或者甚至是42px。(当然，在上述情况下，你还是会被杀。因为√2 不是整数，我们最终得到的条纹宽度总是只有一个；近似值-虽然已经相当准确了。）

三：更好的斜条纹

假设我们希望条纹不是45°而是60°怎么办？或者30°?又或者是3.141 5926535°? 如果我们只是改变渐变的角度，结果看起来会很糟糕。(例如，在下图中，我们试图实现60°条纹，但以失败告终。
幸运的是，我们有更好的方法来创建斜条纹。鲜为人知的真相是linear-gradient()和radial-gradient()还有一个循环加强版:repeating-linear-gradient()和 repeating-radial-gradient()。它们的工作方式与前两种类似，只有一点不同：色标是无限循环重复的，直到整个背景被填满。以下是一个重复渐变的例子：

60°例子

重复渐变

代码段

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

重复的线性渐变完美地适用于你已经猜到的条纹效果！这是由于他们无限循环的天赋，一个渐变模式可以自动重复并覆盖整个背景。因此，我们不再需要担心如何创建一个无缝的贴片。
对比一下，我之前创造的效果也可以通过这个重复的渐变来产生:

效果展示

代码段

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

下面换成60°

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

同色系条纹灵活：

在大多数情况下，我们想要的条纹图案不是由几种非常不同的颜色组成的。这些颜色通常属于相同的颜色系统，但在亮度上有轻微的差异。例如，让我们来看看条纹图案：

效果展示：

代码段：

  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 渐变的浏览器来说，这里的背景色还起到了回退的作用。不仅如此，在下一篇攻略中我们还将看到，通过叠加的手法，具有透明区域的多个渐变图案可以构造出非常复杂的图案。