添加具有多种非渐变颜色的顶部边框

Question

我想在我的页脚顶部添加一个边框，它有几种不同的颜色，如下所示：http://i.imgur.com/Bf8ILCu.png

我环顾四周，看到了为不同面添加图像、渐变或多种颜色的示例，但找不到任何我想做的事情。

Answer 1

您可以为此使用 CSS 渐变。

看看下面的代码片段（您可以根据需要更改颜色）：

.border-top {
  width: 100%;
  height: 20px;
  background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 10%, rgba(241,111,92,1) 10%, rgba(246,41,12,1) 10%, rgba(81,24,240,1) 10%, rgba(81,24,240,1) 23%, rgba(240,24,226,1) 23%, rgba(240,24,226,1) 34%, rgba(39,192,230,1) 34%, rgba(39,192,230,1) 46%, rgba(39,230,52,1) 46%, rgba(39,230,52,1) 58%, rgba(76,82,80,1) 58%, rgba(76,82,80,1) 69%, rgba(173,173,173,1) 69%, rgba(173,173,173,1) 81%, rgba(255,0,21,1) 81%, rgba(255,0,21,1) 91%, rgba(255,204,0,1) 91%, rgba(255,204,0,1) 100%);
}

body {
  margin: 0;
}

<div class="border-top"></div>

希望对您有所帮助！

添加具有多种非渐变颜色的顶部边框

Adding a top border with multiple non-gradient colors

css

border