我想在一些文本周围创建一个框，其边框在标题处停止。参见以下示例。
我找到了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>最佳答案
<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>关于html - 在框周围创建以标题为结尾的边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49131618/