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