不同的CSS3邊框樣式

Question

我想在我的內容添加一個邊框樣式標題這樣

我可以使用CSS3呢？如果有人知道如何做到這一點，請幫助我。

Answer 1

這是一個非常「硬編碼」的解決方案，但我得到了一些工作。

您必須設置mainDiv隱藏左側和右側邊框與網頁上的正文顏色相同。

body { 
 
    background-color: #fff; 
 
} 
 

 
.mainDiv { 
 
    width: 500px; 
 
    height: 50px; 
 
    border: 1px solid #CCAC00; 
 
    position: relative; 
 
    text-align: center; 
 
    line-height: 3em; 
 
} 
 

 
.mainDiv:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 35px; 
 
    top: 5px; 
 
    left: -1px; 
 
    border: 1px solid #fff; 
 
} 
 

 
.mainDiv:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 35px; 
 
    top: 5px; 
 
    left: 31.2em; 
 
    border: 1px solid #fff; 
 
}

<div class="mainDiv">Lorem ipsum dolor sit amet</div>

，如果你想將其編輯成自己喜歡JSFiddle。