text-shadow叠加多方向0模糊阴影是给文字加清晰描边最稳且兼容性最好的方式；因border作用于盒模型而非文字轮廓，无法实现真正贴合笔画的描边效果。
直接用 text-shadow 叠加多方向 0 模糊阴影，是给字幕（如 <span></span>、<h2></h2> 或字幕类 <div>）加清晰描边最稳、兼容性最好的方式；<code>-webkit-text-stroke 看起来简洁，但 Firefox 和旧 Edge 完全不认，不能单独依赖。
为什么不用 border 给文字加“描边”？
border 是围住整个元素盒模型的线，不是贴着文字边缘走的轮廓。给 <span></span> 加 border 会撑开行高、破坏内联流，还可能把空格或换行也框进去——这根本不是描边，是画了个带边框的纸片。
- 描边目标：文字笔画边缘紧贴着有一圈均匀线条
-
border目标：包裹元素内容区域的矩形框 - 想用
border模拟？得配合display: inline-block+padding+line-height微调，极易错位，且无法应对不同字号、字体粗细变化
text-shadow 实现描边的关键参数组合
核心是「多方向偏移 + 0 模糊半径」。漏掉任一方向，就会在对应角落露白；只要 blur-radius 不为 0，边缘就发虚，不是硬边描边。
- 小字号（≤24px）推荐 4 方向：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; - 中大字号（≥32px）建议 8 方向，补上正交方向：
0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000（共 8 个） - 描边颜色别用
currentColor做回退——它会随color变，而描边常需固定色（比如黑底白字配黑描边） - 别写成
text-shadow: 1px 1px 1px #000——第三个值是模糊值，非零即失败
-webkit-text-stroke 的真实使用边界
它确实语法干净：-webkit-text-stroke: 2px #ff0000;，但必须清醒认识它的限制：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- Firefox 全版本无视该属性，哪怕加了
@supports (-webkit-text-stroke: 1px)也无法触发降级逻辑（因为不支持就是不支持，检测直接跳过） - 必须显式设置
color，否则文字和描边叠在一起看不清；若要镂空效果，得配color: transparent - 高清屏（dpr=2）下
1px描边会渲染成物理 0.5px，肉眼发虚——可改用0.5px或媒体查询补偿：@media (-webkit-min-device-pixel-ratio: 2) { ... } - 不能和
text-shadow共存，WebKit 下两者叠加会导致描边变重、模糊
真正可靠的方案是：用 text-shadow 作为基础描边，再用 -webkit-text-stroke 做增强（比如更厚/更锐利），并确保所有浏览器至少看到一层可用描边。最容易被忽略的是——描边宽度单位坚持用 px，别碰 em 或 rem，否则缩放或字体切换时描边会突然变粗或消失。
