CSS的多边框颜色

Question

我想在CSS中创建多个线条边框，每条线条以不同颜色放在彼此的顶部，而不使用背景图像？

见下面的示例：

Answer 1

以下是snippet，其中介绍了如何使用::before和::after伪元素。

body {
  margin: 2em;
}

.TopBorder {
  border-top: 2px solid #36db8b;
  position: relative;
}

.TopBorder::after {
  position: absolute;
  left: 50%;
  right: 0;
  top: -2px;
  border-top: 2px solid #cccccc;
  content: '';
}

<div class="TopBorder ">

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo.

</div>

所以你可以为一个元素设置两个样式，只有一个样式正常（带有::before的边框的第一部分），然后添加另一个样式（显然是::after）。