html - 带有标题文本和透明背景的不同边框

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;
  }

您可以通过图例和边框看到身体背景。

这是一个可以玩的jsfiddle（它使用边框图像作为附加示例）。