border - CSS：具有多种颜色的条纹

Question

我有一个导航栏，希望它在底部有一个边框，就像一个彩色条纹。例如，谷歌使用这样的多色条纹：

我可以在纯 CSS 中做到这一点，还是必须使用类似的东西border-image？

Answer 1

您可以使用线性渐变来做到这一点。除了纯色之外，您还可以为每个站点做渐变。对于谷歌自己的条纹，颜色停止看起来像这样，为了清晰起见使用 CSS 颜色名称：

background-image: linear-gradient(
  to right, 
  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;
}