如何在CSS的盒模型/边框（border）上插入文本？

你之前把border加在body上，建议将边框样式转移到页面容器元素上，更方便插入边框文字，实现该效果有两种常用方案：

方案一：使用HTML原生语义化标签（推荐） #

直接用<fieldset>和<legend>组合，浏览器原生支持边框嵌文字效果，无需复杂定位逻辑。
HTML结构：

<fieldset>
  <legend>这里是边框上的文字</legend>
  页面主体内容
</fieldset>

适配你原有风格的CSS代码：

body {
    background-color: lightgrey;
    padding: 30px;
    margin: 30px;
    text-align: center;
}
fieldset {
    border: 60px solid gray;
    padding: 30px;
    margin: 0;
}
legend {
    /* 调整margin值控制文字的左右偏移和两侧留白 */
    margin: 0 20px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: bold;
}

方案二：自定义元素+绝对定位（灵活度更高） #

如果需要完全自定义文字样式、位置，可以用定位实现，原理是用和页面背景同色的文字块遮盖住对应位置的边框，模拟嵌入效果。
HTML结构：

<div class="container">
  <span class="border-text">边框上的文字</span>
  页面主体内容
</div>

对应的CSS代码：

body {
    background-color: lightgrey;
    padding: 30px;
    margin: 30px;
    text-align: center;
}
.container {
    position: relative;
    border: 60px solid gray;
    padding: 30px;
}
.border-text {
    position: absolute;
    top: 0;
    /* 调整left值控制文字水平位置 */
    left: 50px;
    transform: translateY(-50%);
    background-color: lightgrey;
    padding: 0 12px;
    font-size: 18px;
}

内容的提问来源于stack exchange，提问作者Mohsin Ali