与标题文本和透明背景的另外边界

Question

我想用随机文字标题创建一个这样的框：http://oi44.tinypic.com/1tu4xz.jpg

我知道如何使用静态（未更改的）文本对此进行编码，但是k不知道如何使用随机可变长度文本和边框来执行此操作。让背景显示出来非常重要。

拜托，你知道吗？它可能只是对类似解决方案的参考。

Answer 1

创建一个带框架的普通框，如：

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

然后在框中插入一个带有标题的元素，背景颜色：白色和一些填充。然后这个元素将覆盖边界的一部分。

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

Answer 2

您可以尝试使用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（它使用边框图像作为附加示例）。