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

标签 css border

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

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

最佳答案

您可以为此使用 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>

希望这对您有所帮助!

关于css - 添加具有多种非渐变颜色的顶部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40637540/

相关文章:

html - Flexbox:具有大子元素的两列布局 - 适用于 Chrome,但不适用于 Firefox/IE

javascript - 基于使用指令的变量添加 css 类(或样式)

css - Mega Drop Down 周围的边框

CSS:如何在宽度为 100% 的情况下并排 float 3 个 div 而不会弄乱?

javascript - 当我使用 firefox 时,textarea 上的灰色边框线

javascript - 当固定div位置与父div重叠时如何将其更改为绝对位置

html - 调整浏览器大小时保持文本居中

css - 绝对元素不会显示

css - 如何使用 start 或 value 启动有序列表(IE8)?

html - 如何在边缘中心设置边框? (不是外面或里面)