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

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>