-webkit-text-stroke 是真正的文字描边属性，支持颜色与粗细，渲染干净但仅 WebKit/Blink 内核支持，需用 text-shadow 降级；应使用 em 单位、避免 px、确保对比度≥4.5:1。
text-stroke 不是阴影，但能“假装”描边
用 text-shadow 做描边效果不靠谱——它本质是模糊投影，放大后毛边明显，且无法控制内外边距。而 -webkit-text-stroke 是真正的描边属性，支持颜色+粗细，渲染干净，适合标题、Logo 文字等需要强轮廓的场景。
但它有硬伤：仅 Safari 和 Chrome/Edge（基于 Blink）支持，Firefox 完全不认。所以不能单独用，必须搭配 text-shadow 降级。
-
-webkit-text-stroke: 2px #000：只在 WebKit/Blink 内核生效，值为width color，不支持虚线或渐变 - Firefox 下会直接忽略该声明，文字退回到纯色填充，毫无描边
- Android WebView 4.4+ 支持，但部分国产定制内核（如旧版 UC、QQ 浏览器 X5）可能漏掉前缀
移动端适配要防缩放导致描边断裂
文字缩放（比如用户双指放大、系统字体设置调大）会让 -webkit-text-stroke 的像素值失真：1px 描边在 2x 屏上可能变成 0.5px，渲染成半透明灰边甚至消失；在放大 200% 时又可能突然变粗、糊成一团。
- 优先用相对单位：
-webkit-text-stroke: 0.08em #333比2px更稳，随字号缩放同步变化 - 避免
font-size使用px，改用rem或em，确保描边和文字比例一致 - 在 iOS Safari 中，
viewport设置user-scalable=no会禁用双指缩放，但违背可访问性，不推荐
兼容 fallback 必须写在 -webkit-text-stroke 前面
CSS 解析是顺序覆盖的，如果把 text-shadow 写在 -webkit-text-stroke 后面，WebKit 浏览器会先画描边再叠阴影，结果是“描边+阴影”双重效果，视觉臃肿。正确顺序是让现代浏览器用描边，老浏览器/FF 用阴影兜底。
h1 {
/* Firefox / 老浏览器走这里 */
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
/* WebKit/Blink 浏览器覆盖上面，只显示描边 */
-webkit-text-stroke: 0.06em #000;
}
- 多个
text-shadow值模拟描边时，方向必须全覆盖（上下左右+对角），否则边缘缺角 - 所有
text-shadow的模糊值（第三个参数）必须为0，否则边缘发虚，不像描边 - 别用
filter: drop-shadow()替代，它作用于整个元素盒，不是文字轮廓，且性能更差
描边颜色和背景对比度容易翻车
描边不是装饰，是可读性保障。深色文字+浅色描边（比如白字+1px灰边）在浅背景上可能看不见；反过来，浅字+深描边在深背景上也可能融掉。尤其在 OLED 屏幕上，1px 描边常被子像素渲染吃掉。
- 测试最低对比度：用 Chrome DevTools 的“Contrast ratio”检查文字+描边整体与背景的对比是否 ≥ 4.5:1
- 避免用
rgba(0,0,0,0.5)做描边色——半透会和背景混合，导致描边“发灰”，不够锐利 - 深背景上优先用纯白描边
#fff，浅背景上用纯黑#000，比用灰色更可靠
描边宽度小于 0.04em 在小字号下基本不可见，大于 0.12em 又容易吞掉文字负空间——这个区间得靠真机反复调，别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
