在标题处停止的框周围创建边框

Question

我想在一些文本周围创建一个框，边框在标题处停止。见下面的例子。

我找到了this in an earlier question，但现在它已经10岁了，我想知道它是否已经过时，或者是否有更好的解决方案。

我自己尝试过类似的方法，或多或少都在那里。我很好奇是否有实现这一目标的方法，或者我的方法是否正常。

.welcome-box {
  border: 1px solid #e75d14;
  padding: 0px 20px;
}

.welcome-box h2 {
  margin-top: -18px;
  background-color: #fff;
  display: inline-block;
  padding: 0px 10px;
}

<div class="welcome-box">

<h2>WELCOME</h2>

<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>

</div>

Answer 1

<fieldset>和<legend>标签默认执行该行为，但语义警察如果用于表单控件之外的其他内容可能会感到不安。无论<fieldset> content categories是否足以涵盖<div>被允许拥有的任何目的。

演示

* {
  margin: 0;
}

legend {
  text-align: center;
}

legend h2 {
  padding-bottom: 0
}

<fieldset class="welcome-box">
  <legend>
    <h2>WELCOME</h2>
  </legend>

  <p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum
    text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>

</fieldset>