CSS：多种颜色的条纹

Question

我有一个导航栏，希望它底部有一个边框，就像多色条纹一样。例如，Google使用多色条纹，如下所示：

我可以在纯CSS中执行此操作，还是必须使用border-image之类的内容？

Answer 1

您可以使用线性渐变来完成此操作。除了纯色之外，您还可以为每个停留点进行渐变。对于谷歌自己的条纹，颜色停止看起来像这样，为了清晰起见使用CSS颜色名称：

background-image: linear-gradient(left, 
  blue,
  blue 25%,
  red 25%,
  red 50%,
  orange 50%,
  orange 75%,
  green 75%);

您可以使用background-position和background-size来使其小于完整的标题大小，或者将其放入：after /：before元素之后并更改该元素的大小。

渐变颜色停止示例：

http://codepen.io/tholex/pen/nCzLt

Answer 2

我认为你用背景图片做得更好。通过使每种颜色宽1px，图像文件高1px，它们可以保持图像非常小（它们可以完美地缩放，边缘清晰）。

一个例子：

.navigation-bar:after {
    content: " ";
    height: 6px;
    width: 100%;
    background: url(../img/stripe.png) repeat;
    background-size: 100% 1px;
}