text-shadow多方向零模糊叠加是兼容性最好的描边方案，需用8个±1px整数偏移、blur-radius为0的阴影包围文字，Safari/Chrome/Firefox/Edge全线支持，而-webkit-text-stroke在Firefox中完全失效。
text-shadow 多方向叠加是兼容性最好的描边方案
直接用 text-shadow 模拟描边，是目前唯一能在 Chrome、Firefox、Edge（含旧版）、Safari 全线支持的方式。关键不是“加阴影”，而是用多个零模糊（blur-radius 为 0）的硬边偏移，把文字四面八方“围”起来。
常见错误是只写一个方向，比如 text-shadow: 1px 1px 0 #000，结果只有右下角有边，像被斜着打光——这不是描边，是错位投影。
- 小字号（≤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 - 所有偏移量必须是整数像素且
blur-radius严格为0；哪怕写成0.1px或漏掉0，边缘就会发虚
-webkit-text-stroke 看似简洁，但 Firefox 完全不认
-webkit-text-stroke 写法确实干净：-webkit-text-stroke: 2px #333，但它只是 WebKit/Blink 内核的私有属性。Firefox 渲染时直接忽略，旧 Edge（EdgeHTML）也不支持——不是“效果差”，是根本没生效。
如果你设了 color: black 又加 -webkit-text-stroke，在 Chrome 里会看到黑字叠黑边，几乎看不出描边；正确做法是把文字内容“掏空”，靠描边显形：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
-webkit-text-fill-color: transparent或color: transparent - 不能和
text-shadow混用：WebKit 下两者叠加，描边会变重、发糊 - 描边位置固定居中，无法做“外描边”或“内描边”分离
高清屏（Retina）下描边变细？别盲目加粗，要按 dpr 缩放偏移量
MacBook、iPhone 等设备物理像素密度高（dpr ≥ 2），CSS 的 1px 偏移实际渲染可能只有 0.5 物理像素，导致描边肉眼不可见或发虚。这不是 bug，是渲染机制决定的。
解决方案不是把 1px 改成 2px（那在普通屏上就太粗），而是用媒体查询按设备像素比微调：
- 对 dpr=2 设备，把偏移量减半：
-0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, … - 同时补足更多方向（如 8 向），弥补亚像素偏移带来的覆盖缺口
- 单位坚持用
px；em或rem在缩放时会失准，尤其配合 font-size 动态变化时
需要渐变描边或动画？SVG 是唯一靠谱路径
CSS 的 text-shadow 和 -webkit-text-stroke 都不支持渐变色描边，也无法做描边路径动画（比如“画线式”出现）。这时必须切到 SVG：
- 用
<text>元素，设置fill="none"+stroke+stroke-width - 渐变描边：定义
<linearGradient>，再赋给stroke属性 - 描边动画依赖
stroke-dasharray和stroke-dashoffset，且需先用 JS 或getTotalLength()获取文本真实路径长度 - 注意 SVG 文本默认不继承父级字体设置，
font-family、font-size都得显式声明
描边最易被忽略的细节，其实是“描边与文字颜色的层叠关系”：text-shadow 是投影层，在文字下方；-webkit-text-stroke 是文字自身的一部分；SVG 的 stroke 则可精确控制在 fill 内/外/居中。选哪种，取决于你要的到底是“视觉边框”，还是“图形级轮廓”。
