是否可以在不使用包裝的情況下創建此樣式？

Question

諾貝爾獎給任何能夠幫助我的人。

我需要創建以下樣式：

約束：只能用CSS。該字段由內容管理系統生成爲h3標籤。不能寫HTML將它放入包裝中。寧願不使用背景圖片，因爲客戶端沒有給我一個。不能訴諸於JavaScript，因爲這種風格需要適用於多個頁面，並且我在使用的環境中沒有全局的JavaScript文件。

這裏有一個小提琴：http://jsfiddle.net/d7qrLLug/

Answer 1

你可以做到這一點使用CSS邊框：

JS Fiddle

h3 { 
    color: #FFF; 
    text-transform: uppercase; 
    background-color: #423025; 
    padding: 5px; 
    border-top: 1px solid white; 
    border-bottom: 1px solid white; 
    border-style: double; 
    border-width:4px; 
    border-left: none; 
    border-left: none; 
} 

Answer 2

你可以做到這一點使用之前和之後的僞元素。

h3:before, h3:after { 
border-top: solid 1px white; 
content: ""; 
display: block; 
} 

看到這個的jsfiddle： http://jsfiddle.net/d7qrLLug/5/

Answer 3

這實際上是非常簡單的：

演示：http://jsfiddle.net/d7qrLLug/11/

h3 { 
    color: #FFF; 
    text-transform: uppercase; 
    background-color: #423025; 
    padding: 5px; 
    position:relative; 
} 
h3:before { 
    position:absolute; 
    top: 3px; 
    display:block; 
    width:100%; 
    content:" "; 
    border-top: 1px solid #fff; 
} 
h3:after { 
    position:absolute; 
    bottom: 3px; 
    display:block; 
    width:100%; 
    content:" "; 
    border-top: 1px solid #fff; 
} 

注：您需要絕對定位210和:after不改變生產h3元素的原始高度，如果不是重要的，這將做的工作：

演示http://jsfiddle.net/d7qrLLug/12/

h3:before, 
h3:after { 
    display:block; 
    width:100%; 
    content:""; 
    border-top: 1px solid #fff; 
}