CSS：条纹有多种颜色 [英] CSS: Stripe with multiple colors

问题描述

我有一个导航栏，并希望它在底部有一个多彩色条纹的边框。例如，Google使用如下的多色条纹：

我可以在纯CSS中执行此操作，否则我必须使用 border-image

解决方案

您可以使用线性渐变执行此操作。除了纯粹的颜色，你可以为每个站点做渐变。对于google自己的条纹，颜色停止将是这样，CSS颜色名称用于清楚：

  background-image：渐变（左，
蓝色，
蓝色25％，
红色25％，
红色50％，
橙色50％，
橙色75％ 
 green 75％）; 
  

您可以使用background-position和background-size来播放， ，或将其放在：after /：before元素之后，并更改该元素的大小。

渐变色停止示例：

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

I have a navigation bar and want it to have a border at the bottom like a multi-colored stripe. For example, Google uses a multi-colored stripe like this:

Could I do this in pure CSS, or would I have to use something like border-image?

解决方案

You can do this with a linear gradient. In addition to just plain colors, you can do gradients for each stop. For google's own stripe, the color stops would look like this, CSS color names used for clarity:

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

You can play with background-position and background-size to make it smaller than just the full header size, or put it into an :after / :before element and change the size on that element.

Example of color stops with gradient:

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

这篇关于CSS：条纹有多种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！