【CSS】文字描边的三种实现方式

在CSS中，实现文字描边有几种方法：

1. 使用text-stroke属性（非标准属性，部分浏览器支持）
2. 使用text-shadow属性
3. 使用SVG或者WebGL等技术绘制文字，并添加描边效果

以下是这三种方法的示例代码：

1. 使用text-stroke属性：

.text-stroke {
  -webkit-text-stroke: 1px black; /* Safari */
  text-stroke: 1px black; /* 标准语法（可能不被所有浏览器支持） */
  color: white;
}

2. 使用text-shadow属性：

.text-shadow {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

3. 使用SVG或WebGL：

<svg width="200" height="100">
  <text x="50" y="50" fill="white" stroke="black" stroke-width="2px">
    描边文字
  </text>
</svg>

请注意，text-stroke属性目前是非标准属性，可能不被所有浏览器支持。text-shadow方法提供了一种简单的描边方法，但不是真正的描边，而是通过增加文字周围的阴影来模拟。最后，SVG是一个更为可靠的方案，因为它提供了描边的标准方法，并且在所有浏览器上具有一致的表现。