不同的邊框與標題文本和透明背景

Question

我想創建這樣一個盒子隨機文本標題：http://oi44.tinypic.com/1tu4xz.jpg

我知道如何與靜態（不變）文本代碼本，鉀素不知道如何做到這一點隨機變長文本和邊框有效。讓背景顯示出來很重要。

請問，你知道嗎？它可能只是對類似解決方案的參考。

Answer 1

你可以嘗試玩fieldset和legend元素。他們通常用於形式，但他們當然可以提供一個簡單的解決方案...實現你想要的東西。

你可以嘗試這樣的事：

<fieldset> 
    <legend>Title text</legend> 
    <p>Your random content ;-)</p> 
</fieldset> 

，並在你的CSS是這樣的：

legend { 
     text-align:center; 
     padding:0 20px; 
    } 
    fieldset { 
     border:2px dotted #000; 
    } 

你可以看到通過傳說和邊境身體背景。

here is a jsfiddle to play with（它使用邊框圖像作爲附加示例）。

Answer 2

有框架創建一個正常的盒子，如：

<div style="border:1px solid black"></div> 

然後插入一個元素OVER用您的標題，背景顏色的框：白色和一些墊襯。然後這個元素將覆蓋邊界的一部分。

當然，您可以爲標題元素設置一些背景圖像而不是白色 - 它也可以工作。