text-stroke 不是标准属性，仅 WebKit 浏览器支持 -webkit-text-stroke；Firefox 需用 8 方向 text-shadow 模拟，且描边宽度应使用 px 并注意高倍屏适配。
text-stroke 不能直接用在所有浏览器上，它不是独立属性，而是 -webkit-text-stroke 的别名，仅支持 WebKit 内核（Chrome、Safari、Edge 新版），Firefox 完全不支持。
为什么 text-stroke 写了没效果？
因为标准中根本不存在 text-stroke 这个属性名 —— 浏览器只认 -webkit-text-stroke。写成 text-stroke: 2px #ff6b6b 属于无效声明，开发者工具里会直接标为 strike-through。
常见错误现象：
- 文字毫无描边，控制台无报错但样式未生效
- 复制粘贴代码后发现只有部分浏览器显示正常
- 误以为是字体或
font-weight导致描边“断开”，其实是属性根本没被解析
正确写法：必须带 -webkit- 前缀 + 同时设 color
描边依赖文字内容渲染路径，若 color 为 transparent 或未显式设置，描边可能不可见或表现异常（尤其在 Safari 中）。
实操建议：
- 始终使用
-webkit-text-stroke: <width><color></color></width>，例如：-webkit-text-stroke: 1.5px #333 - 搭配显式
color：描边是“轮廓”，内部填充需单独控制；设color: transparent可实现纯描边效果 - 避免用百分比或
em做描边宽度，只接受绝对单位（px、rem等），且值过大会导致边缘锯齿明显
.stroke-title {
-webkit-text-stroke: 2px #ff6b6b;
color: white; /* 内部填充色 */
}
<p>.stroke-outline {
-webkit-text-stroke: 1.2px rgba(0,0,0,0.7);
color: transparent; /<em> 纯描边，无填充 </em>/
}</p>
Firefox 不支持怎么办？用 text-shadow 模拟
Firefox 对 -webkit-text-stroke 完全无视，唯一兼容方案是多层 text-shadow 模拟描边。虽然不够精准（圆角/尖角处理弱），但足够应对多数标题装饰场景。
关键点：
- 至少 8 个方向阴影（上下左右 + 四个对角）才能接近均匀描边
- 所有
text-shadow的偏移和模糊值必须一致，例如：1px 1px 0 #000, -1px -1px 0 #000, ... - 模糊值设为
0，否则边缘发虚；颜色推荐用rgba()控制叠加强度 - 性能影响小，但维护成本高——改一次描边宽度就得调 8 处数值
描边在高缩放或 Retina 屏下容易糊？注意设备像素比
描边宽度是 CSS 像素，非物理像素。在 2x 屏上，1px 描边可能渲染为 1 物理像素，看起来过细甚至消失；而 2px 又可能太粗、毛边重。
稳妥做法：
- 优先用
px单位，避免rem或em引入缩放干扰 - 对关键视觉元素（如 logo 文字），可结合媒体查询做设备适配：
@media (-webkit-min-device-pixel-ratio: 2)下加大描边宽度 - 慎用
text-stroke做小字号文字（≤14px）的描边，易识别困难，尤其对视力障碍用户
真正麻烦的不是怎么写，而是得时刻记得：它只是 WebKit 的实验性延伸，不是标准；你写的每一行 -webkit-text-stroke，都默认放弃了 Firefox 用户的原生描边体验——能不用尽量不用，非用不可时，务必补 text-shadow 回退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
