[分享]css中border边框中写字

在CSS中，我们可以通过border边框来给元素添加边框，不仅可以设置边框的宽度、样式和颜色，还可以在边框中添加我们想要的文字内容。例子： border: 1px solid 333; borderi...

在CSS中，我们可以通过border边框来给元素添加边框，不仅可以设置边框的宽度、样式和颜色，还可以在边框中添加我们想要的文字内容。

例子：
border: 1px solid #333;
border-image: linear-gradient(to bottom, #000, #ccc) 1 stretch;
border-image-source: url(border-text.png);
border-image-width: 30px;
border-image-repeat: round; 

在上面的例子中，我们首先设置了一个1像素宽、黑色实线边框。通过border-image属性，我们让边框的背景变为从黑色到灰色的线性渐变，并且在边框中央添加了一个border-text.png图片。我们设置border-image-width为30像素，这就是我们边框中显示的图片宽度。

注意，在使用border-image属性时，需要先定义border-image-source图片，然后再设置边框图片的一些样式属性，如边框图片的宽度、重复方式等。

除了使用图片，我们还可以通过:before或:after伪元素来在边框中添加文字，如下所示：

例子：
.border-text:before {
  content: "Hello, CSS!";
  color: #000;
  font-size: 12px;
  display: block;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.border-text {
  border: 1px solid #000;
  position: relative;
  padding: 20px;
} 

在上面的例子中，我们首先定义了一个.border-text类，这个类为元素添加了一个1像素宽、黑色实线边框，以及一些内边距来给伪元素留出位置。

接着，我们使用:before伪元素来在边框中添加文本，设置了文本颜色、字体大小等等。为了让文本垂直居中显示，我们设置了绝对定位，使用了bottom和left属性来让文本位于元素下方居中显示，同时使用transform来让文本水平居中显示。

通过使用border边框中的文字内容，我们可以为元素添加更多的信息，让设计更加精细和优雅。