CSS 如何实现文字描边效果？

Question

CSS 如何实现文字描边效果？

仓乃文 · Accepted Answer

文字描边通过 -webkit-text-stroke 属性实现，可以给文字添加外轮廓描边，适合标题文字和创意设计。

```css
.stroke-text {
  -webkit-text-stroke: 2px #333;
  color: transparent;
  font-size: 48px;
  font-weight: bold;
}
```

描边 + 填充组合：
```css
.stroke-fill-text {
  -webkit-text-stroke: 3px #ff6b6b;
  color: #fff;
  font-size: 48px;
  font-weight: bold;
}
```

多层描边模拟（text-shadow 方案，兼容性更好）：
```css
.multi-stroke {
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
```

补充说明：
- -webkit-text-stroke 是 WebKit 私有属性，Chrome/Safari/Edge 支持
- Firefox 不支持 -webkit-text-stroke，可用 text-shadow 模拟
- 描边会向内和向外各占一半宽度
- 配合 @supports 做渐进增强