text-stroke不能直接写成标准属性，因其仍处于css text decoration level 4草案阶段，仅webkit/blink内核浏览器支持-webkit-text-stroke前缀，firefox完全不识别且无-moz前缀，写text-stroke:2px red会静默失效。
text-stroke 是实现文字描边颜色效果最直接的方案，但它有明确的兼容性边界和行为限制，不能当成普通 CSS 属性随意使用。
为什么 text-stroke 不能直接写成标准属性？
text-stroke 本身是 CSS Text Decoration Level 4 规范中的草案属性，目前只有 WebKit 内核浏览器（Chrome、Safari、Edge 新版）通过 -webkit-text-stroke 支持，Firefox 和旧版 Edge 完全不识别。如果你只写 text-stroke: 2px red，在 Firefox 中会静默失效，文字变成默认色+无描边——而不是报错或降级。
常见错误现象：color 没设为 transparent，结果描边和实心文字同时显示，看起来像加粗而非“描边”；或者漏掉 -webkit- 前缀，导致 Chrome/Safari 也不生效。
- 必须搭配
-webkit-text-stroke使用，text-stroke单独写等于没写 -
color: transparent是空心效果的关键，否则描边会被原始文字盖住 - 描边宽度单位只能是
px，em或rem在部分版本 Safari 中渲染异常
text-shadow 模拟描边的适用场景和参数陷阱
当需要全浏览器兼容（尤其要支持 Firefox），text-shadow 是更稳妥的选择，但不是“随便叠几层阴影就行”。它的本质是用多个方向的纯色阴影拼出轮廓，描边越宽，需要的阴影越多，性能开销线性上升。
典型错误：用 text-shadow: 0 0 2px #000 —— 这只是模糊光晕，不是清晰描边；或只写上下左右四个方向，但没覆盖对角，导致描边在斜角处断裂。
- 最小可用组合是 8 个方向：上、下、左、右 + 四个对角（
-1px -1px,1px -1px,-1px 1px,1px 1px） - 所有
text-shadow的第三值（模糊半径）必须为0，否则边缘发虚 - 描边宽度为
npx 时，偏移量范围应是-n到+n，例如 2px 描边需用±2px偏移
渐变色描边为什么原生不支持？
CSS 没有 -webkit-text-stroke: 2px linear-gradient(...) 这种语法，text-stroke 只接受单色值。想实现“红→蓝渐变描边”，必须绕过原生限制：
一种可行路径是用 SVG <text></text> + stroke + stroke-width + stroke 引用 <lineargradient></lineargradient>，再通过 foreignObject 嵌入 HTML；另一种是用两个重叠文本层：底层用渐变背景裁剪出描边形状（background-clip: text），顶层用透明文字盖住内部——但这要求描边宽度固定且可预估。
容易被忽略的点：SVG 方案在高缩放（如 pinch-zoom）下描边宽度不会随字体等比缩放；而双层文本方案在 font-size 动态变化时，描边视觉粗细会失衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
