通过标题边界到div

Question

我想像这样实现边框和标题 -

css有什么用吗？

我尝试和工作的是 -

.header{
margin-top:-10px;
background:#fff;
}

还有其他方法可以实现这一目标吗？

Answer 1

您可以使用:before或:after

Fiddle

HTML：

<header></header>

CSS：

header{
  border:3px solid;
  height:300px;
  position:relative;
}

header:before{
  content:'Header';
  position:absolute;
  top:-10px;
  left:50px;
  background:#fff;
  padding:0 20px;
}

您还可以使用两个元素：

header和h1

JSFiddle

HTML：

<header><h1>Header</h1></header>

CSS：

header{
  border:3px solid;
  height:300px;
  position:relative;
}

header > h1{
  position:absolute;
  top:-35px;
  left:50px;
  background:#fff;
  padding:0 20px;
}

或者保持简单并使用fieldset。

JSFiddle

<fieldset>
    <legend>Header</legend>
</fieldset>

Answer 2

如前所述，您可以使用fieldset。哪个可行，但如果没有用于表格，则不是最干净的解决方案。

  

HTML <fieldset>元素用于对网络表单中的多个控件和标签（<label>）进行分组。

Source。

作为替代方案，您可以尝试以下代码：

HTML：

<div class="box">
    <h3>title</h3>
</div>

CSS：

.box 
    width: 400px;
    height: 200px;
    border: 1px solid black;
}
.box > h3 {
    position: absolute;
    background: white;
    height: 20px;
    margin-top: -12px;
    margin-left: 10px;
    padding: 0 10px;
}

DEMO