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