使用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）。