text-shadow是兼容性最好的描边方案，需严格写满8个方向、blur-radius为0、偏移量±1px、文字色设transparent；-webkit-text-stroke边缘锐利但仅限WebKit；SVG支持多色动画但影响SEO和响应式。
text-shadow 是最稳妥的兼容方案
不用额外依赖，所有现代浏览器都支持，但必须写满 8 个方向的阴影才能闭合描边，少一个就漏白底。关键参数不能错：blur-radius 必须为 0，偏移量严格控制在 ±1px，文字色建议设为 transparent 避免内外色干扰。
常见错误：只写 4 层（上下左右），结果四角空缺；或加了 0.2px 模糊，描边立刻发虚；又或者用 color: black + 描边，导致颜色叠加变深、边缘不干净。
正确写法示例：
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
-1px 0 0 #000, 1px 0 0 #000,
-1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000;如果要响应式描边粗细（比如小屏缩为 0.5px），得靠 JS 动态注入 style 或用 CSS 自定义属性 + calc()，text-shadow 本身不支持单位缩放。
立即学习“前端免费学习笔记（深入）”；
-webkit-text-stroke 只适合单色且不需 Firefox 支持的场景
它才是语义上真正的“描边”，不是投影，所以边缘锐利、无锯齿。但仅限 WebKit 内核（Chrome/Safari），Firefox 完全无视 -webkit-text-stroke，连 fallback 都不会触发。
容易踩的坑：
- 描边宽度会吃掉文字内边距，小字号下（如
text-xs）可能让文字“被压扁”，需同步调大line-height或font-size - 不能和
background-clip: text混用——描边会盖住渐变背景，视觉上断开 - Tailwind 的
text-stroke类（如你在@layer utilities里自定义的）只是封装了这个属性，不解决兼容性问题
典型用法：
.text-stroke-1 { -webkit-text-stroke: 1px #333; }别指望它在 Firefox 里生效，上线前务必真机测 iOS Safari —— 某些版本对 transparent 文字色+描边组合有渲染 bug。
SVG 是唯一能精确控制多色/动画描边的方案
把文字塞进 <svg></svg>，用原生 stroke 和 stroke-width 控制描边，完全绕过浏览器文本渲染差异。支持渐变描边、虚线描边、路径动画，且缩放不失真。
但代价明显：
- DOM 结构变重，SEO 友好性下降（搜索引擎可能不索引 SVG 里的
<text></text>） - 无法直接用 Tailwind 的
text-*类控制字体大小/行高，得靠font-size、dominant-baseline等 SVG 属性手动调 - 响应式适配麻烦：需要监听容器尺寸 + 用
viewBox或 JS 重算font-size
基础结构：
<svg viewBox="0 0 200 100"> <text x="10" y="60" fill="none" stroke="#ff6b6b" stroke-width="2">Hello</text> </svg>
注意 fill="none" 才能让描边成为唯一可见部分；若要保留文字填充色，fill 设为实色，再叠一层描边即可。
别碰 border 模拟描边这种思路
有人用 inline-block 包文字，再加 border 试图“伪造”描边，这在语义和效果上都错了。
问题很直接：
-
border是盒模型边框，会撑开布局、影响行高对齐，而描边应该紧贴字形轮廓 - 圆角文字、斜体、连字（ligature）下，
border完全无法跟随字形变化 - 暗色模式切换时，
border-color不会随文字色自动适配，得额外写媒体查询
真正要描边，就回到 text-shadow、-webkit-text-stroke 或 SVG <text></text> 这三条路。选哪条，取决于你愿不愿意为多色/动画/精准度多写几行代码，以及是否必须支持 Firefox。
