css 文字边框

/* 示例代码：为文字添加边框效果 */

.text-border {
  /* 使用 text-stroke 属性来设置文字边框 */
  -webkit-text-stroke: 2px red; /* 边框宽度和颜色 */
  color: white; /* 文字颜色 */
}

/* 如果需要兼容性更好的方案，可以使用伪元素实现文字边框效果 */
.text-border-alt {
  position: relative;
  color: white; /* 文字颜色 */
}

.text-border-alt::before {
  content: attr(data-text); /* 从 data-text 属性中获取文本内容 */
  position: absolute;
  left: 0;
  top: 0;
  color: red; /* 边框颜色 */
  z-index: -1;
  text-shadow: 
    1px 0 0 red,
    -1px 0 0 red,
    0 1px 0 red,
    0 -1px 0 red,
    1px 1px 0 red,
    -1px -1px 0 red,
    1px -1px 0 red,
    -1px 1px 0 red; /* 创建文字边框效果 */
}

解释说明：

1. -webkit-text-stroke：这是最简单的方式，直接通过 CSS 设置文字的边框。它支持大部分现代浏览器，但可能在某些旧版本浏览器中不兼容。

2. 伪元素方案：为了更好的兼容性，可以通过 ::before 伪元素来创建一个带有阴影效果的文字边框。这种方式通过 text-shadow 属性模拟出边框的效果，适用于更多浏览器。