如何設計html元素的邊框？

我有這個網站的一部分，我希望看起來像這樣的H3 ...如何設計html元素的邊框？

-------------------居中文本在這裏---- ---------------

其中「---」部分是花式的wiggley背景圖像。左邊的和右邊的是彼此的反射。

那麼一個選項是...

<h3> 
    <div class="left-image-thing"></div> 
    <span>Centered Text Here</span> 
    <div class="right-image-thing"></div> 
</h3>

...並把圖像周圍跨度的div。但我想只是有...

<h3>Centered Text Here</h3>

...只是使用css的左和右背景圖像。有沒有辦法做到這一點？只有一個標籤，CSS等？

來源

2013-01-10 chrispitzer

你可以使用pseudo elements，:before和:after：

h3 { 
    text-align: center; 
} 

h3:before { 
    content: url('myimageurl1.png'); 
} 

h3:after { 
    content: url('myimageurl2.png'); 
}

當然你的CSS將更加複雜，但這是處理你的使用情況的方式。

編輯：這是an example。

來源

2013-01-10 21:27:47 Jason

當我這樣做，我得到.......... image.pngCentered Text Hereimage.png ........而不是........ [實際圖像]居中文本在這裏[實際圖片] ........所以，有沒有辦法告訴「內容」CSS屬性數據是「安全」呈現爲HTML？ – chrispitzer

啊....... h3：before {content：url（image.png）; } 謝謝。 – chrispitzer

@chrispitzer看到我的編輯 – Jason

的僞元素嚇唬我，因爲我們需要支持低端的瀏覽器......這個就可以在所有（甚至低端）：

CSS：

h3 { 
    background: url('myimageurl1.png') no-repeat left middle; 
    padding-left: 100px /*This should be the width of myimageurl1.png */ 
} 

h3 span { 
    background: url('myimageurl2.png') no-repeat right middle; 
    padding-right: 100px /*This should be the width of myimageurl2.png */ 
}

HTML：

<h3><span>Centered Text Here</span></h3>

來源

2013-01-11 00:20:01

如何設計html元素的邊框？

回答

相關問題