css - 使用 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)，然后另一种添加在后面(显然是 : :之后).