text-shadow 是最稳妥的文字描边方案，需用4–8个零模糊阴影多方向叠加实现均匀描边，-webkit-text-stroke需配合 color: transparent 才生效且兼容性差，Retina屏需按dpr优化。
text-shadow 是最稳妥的选择，-webkit-text-stroke 只在 Chrome/Safari/新版 Edge 里生效，Firefox 和旧版 Edge 完全不认——别把它当主力用。
用 text-shadow 模拟描边：4–8 个零模糊阴影是关键
单写一个 text-shadow: 1px 1px 0 #000，只会右下角有边，不是描边，是斜角投影。必须叠加多方向、blur-radius 为 0 的阴影才能围住文字。
- 小字号（14–20px）推荐 4 方向：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 - 中等描边（如按钮文字）加中间层，共 5 层：
0 0 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 - 描边变粗？把
1px改成2px，但注意：超过2px后边缘易出现锯齿，尤其在非 Retina 屏上
-webkit-text-stroke 要生效，color 得设成 transparent
很多人写了 -webkit-text-stroke: 2px red 却看不到效果，是因为没处理填充色。默认 color 是黑色，会盖住描边；必须显式设为透明，描边才露出来。
- 正确写法：
-webkit-text-stroke: 2px #333; color: transparent; - 不能和
text-shadow混用——WebKit 下两者叠加，描边会过重甚至发虚 - 描边永远居中，无法做“内描边”或“外描边”，也不能控制连接方式（比如圆角 vs 尖角）
Retina 屏上描边发虚？不是 bug，是像素比导致的
MacBook Pro 或 iPhone 上，CSS 的 1px 描边可能渲染成物理 0.5px，肉眼看起来细、淡、甚至消失。这不是代码写错了，是设备像素比（dpr）限制。
- 别盲目加宽到
2px，那在普通屏上就太粗了 - 更合理做法：用媒体查询按 dpr 补偿，例如
@media (-webkit-min-device-pixel-ratio: 2) { .btn { text-shadow: -0.5px -0.5px 0 #000, ... } } - 或者直接用
0.5px偏移 + 更多方向（如 8 向），兼顾清晰度与兼容性
描边看着简单，但真正要跨浏览器、跨设备稳定显示，核心就三点：不用单阴影、color 必须透明（对 -webkit-text-stroke）、blur-radius 必须为 0。其他都是在这基础上微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
