CSS中如何在边框上添加文字

在CSS中，直接在边框上添加文字通常是不可能的，因为边框本身是一个线性的装饰，不是内容区域。不过，有一种间接的方式可以实现类似的效果，即在边框内部创建一个文本容器，并利用伪元素（如`:before`和`:after`) 来模拟文字浮于边框之上。

以下是一个例子，演示如何在方形盒子的顶部添加一条带文字的“标题”：

.box-with-text-on-border {
  position: relative;
  display: inline-block;
}

.box-with-text-on-border::before {
  content: "边框上的文字";
  position: absolute;
  top: -5px; /* 调整文字距离边框的距离 */
  left: 50%; /* 将文字置于边框中心 */
  transform: translateX(-50%); /* 对齐文字到边框左侧 */
  font-size: 14px; /* 字体大小可自定 */
  color: white; /* 文字颜色 */
  background-color: rgba(0, 0, 0, 0.7); /* 边框背景透明度 */
  padding: 3px 8px;
  box-sizing: border-box;
  z-index: 1; /* 确保文字在边框之上 */
  border-width: 2px;
  border-style: solid;
}

/* 可选：为边框添加更多样式，例如圆角 */
.box-with-text-on-border::before {
  border-radius: 4px;
}

/* 或者为整个方块添加边框 */
.box-with-text-on-border {
  border: 1px solid black;
}

在这个例子中，我们使用了`:before`伪元素并在绝对定位下放置文本，使其看起来像是浮在边框上方。注意，这并不是真正意义上的边框文字，如果边框长度变化，文字不会跟随移动。