CSS 中的条纹

如今在 CSS 中创建条纹非常容易。通过 `background-image` 属性实现的 CSS 渐变 真正地帮助了我们。我认为我应该在一个易于参考的地方记录一些变体。

普通彩色斜纹

由于 `repeating-linear-gradient()`，斜纹很容易实现。

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

与其将最后一个颜色停靠点设置为 100%（或无，意味着 100%），不如将其设置为固定值。除此之外，它就会不断重复。这就是我认为的方式（放大）

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 epfEc。

渐变斜纹

如果您将背景设置为普通的 `linear-gradient()`，然后使用 `repeating-linear-gradient()` 使一半的条纹完全透明，则看起来就像条纹具有渐变一样。由于存在多个背景（以及 堆叠顺序），您可以将它们全部放在同一个元素上。

background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 xhkpD。

图像上的条纹

可能是一种纹理？任何图像都可以。您可以通过使一些条纹完全透明，而另一些则完全不透明，来显示图像的一部分。或者，您可以使用任何组合。同样，多个背景允许这一切都发生在同一个元素上。

background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 10px,
  rgba(0, 0, 0, 0.3) 10px,
  rgba(0, 0, 0, 0.3) 20px
),
url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/[email protected]);

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 gaKyv。

任何方向，任何角度

它不必完全是 45 度。这是 `repeating-linear-gradient()` 的美妙之处。它不像这个必须对齐并重复的完美矩形，它只是一组重复的绘图指令。

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 qfHmw。

直条纹（略好浏览器支持）

CSS 渐变存在一种非常旧的语法，它使用 `-webkit-gradient()`（注意没有“linear”或“radial”）。基本上：Safari 4、Chrome 1-9、iOS 3.2-4.3、Android 2.1-3.0。旧的东西。这些浏览器不支持重复渐变。但是您可以通过使用 `background-size` 创建一个小的背景矩形，并在其中绘制条纹，并使其像 `background-image` 那样自然地重复，从而模拟这种效果，尤其是对于直条纹而言。

background: linear-gradient(
  to bottom,
  #5d9634,
  #5d9634 50%,
  #538c2b 50%,
  #538c2b
);
/* The rectangle in which to repeat. 
   It can be fully wide in this case */
background-size: 100% 20px;

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 uxJrf。

如果您想变得疯狂，可以使用 `transform: rotate()` 旋转带有这些直条纹的元素，并截断溢出部分，以更深层的浏览器支持来复制斜纹。听起来很复杂。

垂直条纹

您可以使用与上述相同的方法来创建垂直条纹。或者，您可以直接使用 `repeating-linear-gradient()`。

background: repeating-linear-gradient(
  to right,
  #f6ba52,
  #f6ba52 10px,
  #ffd180 10px,
  #ffd180 20px
);

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 oCpEu。

为了明确起见，使用 `repeating-linear-gradient()` 最好同时使用 `-webkit-repeating-linear-gradient()` 和无前缀的版本，如果您，您知道，要自己添加前缀 尽管您不应该这样做。

径向条纹

谁说它们必须是直线呢？径向渐变可以是 `repeating-linear-gradients()`。

/* Note the RADIAL */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的笔 AEymd。

Funky Town

有时会发生舍入误差（也许？）或其他渲染问题。

怎么办呢。我怀疑随着时间的推移会变得更好。

更新：Christopher Cohen 的评论

您可以通过设置基于百分比的停靠点并使用 `background-size` 来避免 Funky Town。我不知道 Chrome 是否只是对 % 与 px 的计算精度不同，但我发现这使我获得了非常整齐的线条。

另一个快速提示；有时您需要指定 `background-attachment: fixed`，否则它会忽略 `background-position`。当使用重叠的渐变填充框来设置进度条等的样式时，这很有用。

查看 CodePen 上 Christopher Cohen (@Jeevecore) 创建的笔 Repeating gradients。

所有演示

现在一起。