text-shadow 是实现文字描边最简单可靠、兼容性最好（ie10+）的纯 css 方式，需用 8 个方向零偏移阴影组合模拟均匀描边，避免单层斜向阴影或误用 drop-shadow()。
text-shadow 实现文字描边最简单可靠
纯 CSS 的 text-shadow 是实现文字描边最轻量、兼容性最好（IE10+）、无需额外 DOM 或 Canvas 的方式。它本质是给文字叠加多个偏移阴影，当偏移量为 0 且模糊值较小时，视觉上就是一圈均匀的“边框”。
常见错误是只写一层 text-shadow: 2px 2px 2px #000——这只会产生一个斜向阴影，不是环绕描边。真正描边需要 8 个方向的零偏移或微偏移阴影组合：
text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
如果只要单侧粗边（比如仅下边加厚），可只保留 0px 1px 0 #000 这一行；若要更柔和的描边，把所有 0 换成 0.5px 并加轻微模糊（如 0.2px），但注意模糊值过大会让边缘发虚，失去“描边”感。
filter: drop-shadow() 不适合描边，容易误用
drop-shadow() 是 filter 函数，作用于整个元素盒模型，不是文字本身。对内联文本使用时，它会先将文字光栅化成位图，再对其轮廓投阴影——结果不可控：小字号文字边缘锯齿严重，圆角描边不均匀，且无法精确控制描边宽度和颜色分层。
典型误用场景：filter: drop-shadow(0 0 2px #ff0000) 看似发光，实则在 Chrome 中可能渲染出毛边，在 Safari 中可能完全不生效（尤其配合 transform 时）。它更适合卡片、图片等块级元素的投影，而非文字描边。
如果你已用 filter 却发现描边忽粗忽细、颜色混叠，大概率是浏览器对文字抗锯齿与滤镜合成的处理差异所致，应立刻切回 text-shadow 方案。
多层 text-shadow 控制发光 + 描边的分层效果
要同时实现“内描边 + 外发光”，不能靠一层 text-shadow 混合搞定。必须分层：内层用零模糊硬边做描边，外层用带模糊的扩散阴影做发光，且发光层需放在描边层下方（CSS 层叠顺序从后往前绘制）。
例如红色文字带黑边+黄光：
color: red; text-shadow: /* 最外层：发光（模糊大、颜色浅、范围宽） */ 0 0 8px #ffea00, 0 0 16px #ffea00, /* 中间层：描边（零模糊、颜色深、紧贴文字） */ -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
注意：发光阴影必须写在描边阴影之前，否则描边会被发光层盖住；模糊值（第三个参数）决定光晕强度，但超过 20px 在移动端易触发性能警告；多层发光建议用不同模糊值叠加，比单层大模糊更自然。
Webkit 内核特有 -webkit-text-stroke 不推荐用于生产
-webkit-text-stroke 看似最直白：-webkit-text-stroke: 2px blue 就能描边。但它有几个硬伤：
- 仅 WebKit 内核支持（Chrome/Safari 有效，Firefox/Edge 完全忽略）
- 与
text-shadow叠加时行为异常：描边会覆盖阴影，且无法单独控制描边颜色透明度 - 对中文字体支持差，某些字体（如思源黑体）描边会断续或漏点
- 开启硬件加速后可能出现描边闪烁或错位
除非你明确只跑 Safari 且文字全是英文大写，否则别把它当主力方案。临时调试可以，上线前务必降级到 text-shadow 备份。
描边最麻烦的其实是小字号（≤14px）下的像素对齐——此时 -1px/0px/1px 组合可能因 subpixel 渲染失效，得改用 -0.5px/0/0.5px 并配合 font-smoothing: antialiased 强制关闭次像素渲染。这点很容易被忽略，直到 QA 在 Retina 屏上截图说“描边一边粗一边细”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
