css无原生描边属性：-webkit-text-stroke仅webkit/blink支持，firefox不兼容；text-shadow是跨浏览器伪描边方案，但属阴影叠加、有渲染缺陷；精准描边需用svg或canvas。
CSS 里没有真正意义上的“描边”原生属性，text-stroke 是 WebKit 内核专属（Chrome/Safari），而 text-shadow 是通用方案但本质是投影，不是矢量描边——想跨浏览器稳定出效果，得知道各自能干什么、不能干什么。
text-stroke 只在 Safari 和 Chrome 里可靠，Firefox 和 Edge 完全不支持
-webkit-text-stroke 是唯一接近“描边”的 CSS 属性，但它只在基于 WebKit/Blink 的浏览器中生效。Firefox 从不支持，Edge 自 Chromium 版起才继承该能力，旧版 Edge（EdgeHTML）彻底无视。
- 必须写全前缀：
-webkit-text-stroke: 2px #000;，只写text-stroke无效 - 它不支持虚线、渐变、端点样式等高级控制，纯色 + 粗细 + 位置（始终居中）
- 当文字有
color且未设-webkit-text-stroke-color时，描边会继承文字颜色，容易误以为“没生效” - 与
background-clip: text+color: transparent混用时，在 Safari 中可能触发渲染异常（文字闪烁或描边断裂）
text-shadow 做描边是“凑合”，但兼容性最好
用多层 text-shadow 模拟描边，是唯一能在 IE9+、Firefox、Chrome、Safari、Edge 全平台工作的办法。但它不是描边，是多个偏移阴影叠加出来的视觉假象。
- 基础写法：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;—— 这是 1px “伪描边”，注意第 3 个值（模糊半径）必须为0，否则边缘发虚 - 想加粗到 2px？补上中间四向：
0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000，共 8 层，性能开销明显上升 - 抗锯齿问题：在 Windows 上 ClearType 开启时，
text-shadow描边边缘常带灰边；macOS 渲染更干净，但小字号（≤14px）下仍易糊成一团 - 无法应对斜体或自定义字体的字形凹陷区域（比如字母 “o” 内圈），阴影会漏进内部，形成“双环”怪效果
真正可控的描边只能靠 SVG 或 Canvas
如果项目要求描边必须精准贴合字形、支持虚线/渐变/缩放不失真，或者要适配深色模式自动反色，CSS 就该让位了。
- SVG
<text></text>支持标准stroke、stroke-width、stroke-linejoin等全套 SVG 描边属性，且可响应式缩放 - 把文字转成
<path></path>后，还能用stroke-dasharray做描边动画，这是 CSS 完全做不到的 - Canvas 2D 的
strokeText()方法允许设置lineCap、lineJoin，适合动态生成带描边的文字图（如水印、验证码） - 代价是：SEO 不友好、无法被屏幕阅读器自然读取、文本不可选（除非额外加透明 DOM 文本层覆盖）
别指望一行 CSS 解决所有场景。text-stroke 是快捷键，不是万能钥匙；text-shadow 是备胎，但得会调参；真要“漂亮”又“可控”，就得接受 SVG 的结构复杂度——尤其当设计稿里那个描边带着圆角端点、0.5px 虚线、还随滚动渐变色的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
