如何创建具有多种不同颜色的边框底部？

Question

我想知道如何使border-bottom属性具有不同的颜色，如下图所示。

Answer 1

有几种选择：

选项1

.box {
  border-bottom: 5px solid red;
  position: relative;
}

.box:after {
  content: '';
  position: absolute;
  bottom: -10px;
  height: 5px;
  background: blue;
  left: 0;
  right: 0;
  width: 100%;
}

.box:before {
  content: '';
  position: absolute;
  bottom: -15px;
  height: 5px;
  background: yellow;
  left: 0;
  right: 0;
  width: 100%;
}

<div class="box">
  
</div>

选项2

另一种选择是用三个您喜欢的颜色的矩形创建一个svg，并使用border-image选项。

有关更多信息，请参见w3schools docs。

Answer 2

您可以简单地使用带有渐变的边框图像：

Stream<T> findAll(Specification<T> spec)

.box {
  height:100px;
  border-bottom:15px solid transparent;
  border-image:linear-gradient(to bottom,pink 30%,red 30%,red 60%,green 0) 200;
}

Answer 3

您可以将after添加到div并设置其背景颜色。使用linear-gradient生成所需的颜色；

也请检查此Gradient Generator

#grad1 {
  width: 80%;
  height: 100px;
  position: relative;
  background-color: #e5e5e5;
}

#grad1:after {
  content: "";
  position: absolute;
  bottom: -10px;
  height: 20px;
  left: 0;
  width: 100%;
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top, orange, yellow, green, cyan, blue, violet);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, orange, yellow, green, cyan, blue, violet);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, orange, yellow, green, cyan, blue, violet);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, orange, yellow, green, cyan, blue, violet);
  /* Standard syntax (must be last) */
}


}

<div id="grad1">Example</div>

Answer 4

使用::before代替borber-bottom

.box {
  width:600px;
  height:100px;
  background:#262626;
  position:relative;
}

.box::before {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:600px;
  height:30px;
  background:linear-gradient(to bottom, magenta 0px, magenta 6px, red 6px, red 12px, blue 12px, blue 18px, green 18px, green 24px, yellow 24px, yellow 30px);
}

<div class="box"></div>

在外面

.box {
  width:600px;
  height:100px;
  background:#262626;
  position:relative;
}

.box::before {
  content:'';
  position:absolute;
  bottom:-30px; /* same as minus height */
  left:0;
  width:600px;
  height:30px;
  background:linear-gradient(to bottom, magenta 0px, magenta 6px, red 6px, red 12px, blue 12px, blue 18px, green 18px, green 24px, yellow 24px, yellow 30px);
}

<div class="box"></div>