-webkit-text-stroke需配合color: transparent才可见，否则文字填充色会覆盖描边；它不支持渐变，firefox旧版需用text-shadow模拟，多色描边须用svg或canvas。
直接用 -webkit-text-stroke 是最简单可靠的方案，但必须配 color: transparent 才能看清描边；不加这句，描边会被文字本体盖住。
为什么 -webkit-text-stroke 常常“没效果”
这不是 bug，而是 CSS 渲染顺序导致的视觉遮挡。描边是围绕文字轮廓绘制的，但默认文字颜色（比如 color: black）会完全覆盖描边区域。
-
-webkit-text-stroke: 2px red确实画出了红色边框 - 但如果同时设了
color: black，黑色文字就填满整个字形，把红边“吞掉”了 - 正确做法是让文字内容“不可见”，只留描边：必须加
color: transparent - 注意：不能只靠
text-fill-color: transparent，它在部分旧版 Safari 中不生效，color才是兜底关键
-webkit-text-stroke 的参数细节和兼容性
这个属性目前仍是非标准（CSS Text Decoration Level 4 草案），但 Chrome、Safari、Edge 全系支持，Firefox 从 2025 年起已启用（需开启 layout.css.text-stroke.enabled 标志，生产环境建议回避 Firefox 单独使用）。
- 语法固定为两个值：
-webkit-text-stroke: <width><color></color></width>，不能写成stroke-width或分开声明 -
<width></width>支持px、em、rem，但避免用pt或百分比，渲染不稳定 -
<color></color>支持所有标准颜色值，包括rgba()和hsl()，但透明度只影响描边本身，不影响文字填充 - 不支持渐变色描边——这是硬限制，
linear-gradient在这里无效
不支持 -webkit-text-stroke 时的 fallback 方案
当需要兼容 Firefox 旧版本或某些 Electron 内核时，text-shadow 模拟是唯一实用选择，但要注意性能和精度。
- 8 向阴影是最常用写法：
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, ...，共 8 条，覆盖上下左右+四角 - 描边宽度 = 阴影偏移绝对值，所以 1px 偏移 ≈ 1px 描边；想加粗到 2px，就得用 ±2px
- 缺点明显：文字边缘有轻微锯齿（尤其斜线）、小字号下易糊、高 DPI 屏幕可能模糊、大量文本时 GPU 渲染开销上升
- 不要用
blur-radius（第三个值），设成0，否则描边发虚 - 如果文字本身要带颜色，别设
color: transparent，而应设成目标填充色，并让 shadow 颜色与之对比足够强
真正难处理的是多色描边或渐变描边——这些场景下，-webkit-text-stroke 和 text-shadow 都无能为力，得切到 SVG <text></text> + stroke + stroke-dasharray，或者用 Canvas 绘制。别试图用伪元素叠加 hack，维护成本和响应式适配代价远超收益。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
