如何在 HTML 中的 div 边框上写入文本

在 HTML 中，我们经常使用 div 元素来对网页进行布局和样式设置。对于一些特殊的需求，我们可能需要在 div 边框上写入文本，以达到线条和文字相融合的效果。

下面介绍两种常见的实现方式。

1. 使用 ::after 伪元素

可以使用 ::after 伪元素在 div 边框上插入内容，这样的文本内容不会影响 div 元素自身的内容，因为 ::after 伪元素只是这个元素的子元素。

<div class="border-box">
  <p>这是一个带边框的区块</p>
</div>

.border-box {
  position: relative;
  border: 1px solid #000;
  padding: 20px;
}

.border-box::after {
  content: "边框上的文字";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFF;
  padding: 0 10px;
  font-size: 14px;
}

以上示例中，我们在 .border-box 上使用了 position: relative;，并在其 ::after 伪元素中设置了 position: absolute;。其中，top: -14px; 将文本移动到了上方， left: 50%; 将文本居中显示， transform: translateX(-50%); 修正了文本居中时位置的偏移，background-color: #FFF; 设置了背景色为白色，padding: 0 10px; 表示文本块的左右内边距为 10px。

最终效果：

2. 使用 box-shadow 属性

另一种实现方式是使用 box-shadow 属性，由于 box-shadow 属性可以设置多个阴影效果，我们可以设置一个透明的时不时描边，再将文字或图案描在描边上即可。

<div class="border-box-2">
  <p>这是另一个带边框的区块</p>
</div>

.border-box-2 {
  position: relative;
  padding: 20px;
  background-color: #FFF;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 6px #EEE;
}

.border-box-2::before {
  content: "BORDER TEXT";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  font-size: 14px;
  letter-spacing: 3px;
}

以上示例中，我们在 .border-box-2 上设置了两个 box-shadow，第一个为黑色的 2px 透明描边，第二个为灰色的 6px 透明描边。然后，我们在其 ::before 伪元素中设置了 content 属性来描上文本，并设置了 color、font-size 以及 letter-spacing 来调整文本的样式。

最终效果：

以上就是两种实现方式的介绍，需要注意的是，第二种方式在一些浏览器上可能会出现一些兼容性问题，对于这种情况，我们可以使用第一种方式来绕过问题。