完整的盒子边框，只有盒子css标题上缺少部分

Question

我正在创建一个可能div的项目，每个div都有一个完整的盒子边框来确定或看到每个div的边界我希望通过为边框本身的每个盒子添加标题使其看起来更酷实现如下图所示

下面的图片是我想用css实现的。我搜索的方式，但到目前为止没有人工作几乎所有人都说使用这种边框设计的图像，但我试图使用border-style，但我不确定这是否有可能任何赞赏的想法

Answer 1

您可以使用带有图例的fieldset html标记来实现此目的，

这是代码：

<div>
  <fieldset>
  <legend>Box title:</legend>
  <span>foo</span>
  <span>foo</span>
  <span>foo</span>
  </fieldset>
</div>

这是一个小提琴：

http://jsfiddle.net/oogley_boogley/kzn2g2nh/2/

Answer 2

你应该使用<fieldset>，你应该将fieldset css样式更改为display:block以进行样式设置，否则它将作为内联元素。

documentation

Fiddle DEMO

legend{

    color:red;
}
fieldset{
    display:block;
    height:100px;
}