CSS–；边框底部的多种颜色属性

我想知道如何使

边框底部

属性具有不同的颜色，如下图所示。起初，我想让

边框底部成为一个渐变，但后来我不知道效果如何。有什么建议吗

有没有一种方法可以使边界更加刚性，而不是像这把小提琴所示的渐变：

看看这个代码笔。它使您能够很好地理解制作此图像所需的CSS元素：


以下是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;
}

您可以使用无序列表和纯CSS添加边框，如下所示

请遵循以下示例：


HTML:

像这样@Jared是的，没错，这是一个演示：可能与（或相关的）重复
<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>

* {
  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;
}