不同的边框与标题文本和透明背景

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用您的标题，背景颜色的框：白色和一些垫衬。然后这个元素将覆盖边界的一部分。

当然，您可以为标题元素设置一些背景图像而不是白色 - 它也可以工作。