做活动页、海报、弹幕标题的时候，经常会碰到一个需求：给文字加一圈描边，让它在花里胡哨的背景上也能看清。

这个效果说难不难，但每次要用都得想半天 —— -webkit-text-stroke 好像有兼容问题，text-shadow 又容易描得歪歪扭扭。今天干脆把几种常用写法整理一下，方便自己以后直接抄。

方案一：text-shadow（兼容性最好）

用多层 text-shadow 模拟描边，通过 8 个方向的阴影拼出一圈轮廓。兼容性最好，几乎所有浏览器都支持。

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

缺点也很明显：阴影是「硬拼」出来的，笔划拐角处容易有缺口，而且代码啰嗦。

方案二：-webkit-text-stroke（最简洁）

CSS 提供了专门的描边属性 -webkit-text-stroke，一行搞定，字体越大越能看出对比。

.text-stroke-webkit {
  -webkit-text-stroke: 2px #000;
  color: #fff;
}

注意两点：

描边会「压在」文字笔划上，会让字变粗变糊，字号小的时候尤其明显。
该属性带 -webkit- 前缀，不过 Chrome、Safari、Firefox、Edge 现代版本基本都支持，日常够用。

方案三：text-stroke + text-shadow 结合（描空心字）

如果想要「描边空心字」（只有轮廓、里面透出背景），可以搭配 -webkit-text-stroke 把文字颜色设为透明：

.text-stroke-hollow {
  -webkit-text-stroke: 2px #000;
  color: transparent;
}

如果想要「外描边、中间是实心」，用 text-shadow 做外圈阴影，再用 text-stroke 兜底：

.text-stroke-outline {
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 0 4px #000;
}

对比一下

方案	优点	缺点
text-shadow	兼容性最好	代码多、拐角有缺口
-webkit-text-stroke	简洁、效果好	笔画会被描边变粗、有小字体糊的问题
stroke + 透明色	能做空心字	依赖 -webkit- 前缀

写在最后

日常使用我推荐 **-webkit-text-stroke**，简单省事；遇到需要兼容老旧环境或描空心字的情况，再退回到 text-shadow 方案。

以上就是给文字添加描边的几种写法，希望能帮到正在发愁的你 😄