CSS - border-bottom属性上的多种颜色

Question

我想知道如何使border-bottom属性具有不同的颜色，如下图所示。最初，我正在考虑使border-bottom成为渐变，但后来我不知道它会有多好。有什么建议吗？

有没有办法让边框更加僵硬，而不是像这个小提琴中所示的渐变：http://jsfiddle.net/agusesetiyono/796XC/7/light/

Answer 1

看看这个codepen。它可以让您很好地了解制作此图像所需的CSS元素类型：

https://codepen.io/timteeling/pen/aiFcn

这是CSS：

body { background: #eee; }

h1 {
  margin: 30px auto;
  text-align: center;
  width: 750px;
  color: #222;
  font-size: 6em;
  /*text-transform: uppercase;*/
  font-family: futura,'avenir next condensed', 'arial narrow', sans-serif;
  font-weight: 700;
    background-image: -webkit-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
    background-image: -moz-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
    background-image: linear-gradient(to right, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
    -webkit-background-size: 100% 5px;
    -moz-background-size: 100% 5px;
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-position-y: bottom;
}

Answer 2

您可以使用无序列表和纯CSS这样添加边框

请遵循以下示例：

http://codepen.io/anon/pen/dogMKy

HTML：

<div class=container>
  <div>
    <h4>Howdy, this is multiple colors of border-top. Actually it's not border, it's just multiple list item. </h4>
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS：

* {
  margin:0;
  padding:0;
  font-family:segoe UI;
}

.container {
  width:400px;
  margin: 150px auto 0 auto;
  border-top:1px solid #95a5a6;
  border-left:1px solid #95a5a6;
  border-right:1px solid #95a5a6;
  border-bottom:1px solid #95a5a6;
}

ul {
  list-style:none;
  width:100%;
  font-size:0;
}

li {
  display:inline-block;
  width:20%;
  height:7px;
}

li:nth-child(1) {
  background:#2ecc71;
}

li:nth-child(2) {
  background:#3498db;
}

li:nth-child(3) {
  background:#f1c40f;
}

li:nth-child(4) {
  background:#e74c3c;
}

li:nth-child(5) {
  background:#9b59b6;
}

div {
  margin: 20px;
}

h4 {
  color:#95a5a6;
  text-align:center;
}