text-stroke 无效果因非标准属性，须用 -webkit-text-stroke（Chrome/Safari/新版Edge支持，Firefox完全不支持）；需配合 -webkit-text-fill-color: transparent 显形，宽度只认 px 等绝对单位，多色依赖 CSS 变量或 JS 动态设置；text-shadow 可模拟多色描边但性能开销大。
text-stroke 在 Chrome/Firefox 中为什么没效果
因为 text-stroke 不是独立属性，必须和 -webkit-text-stroke 一起用，且只在支持 WebKit 内核的浏览器（Chrome、Safari、Edge 新版）中稳定生效；Firefox 完全不支持，连前缀都不认。
常见错误现象：text-stroke: 2px red; 直接被忽略，文字还是默认样式，控制台也无报错——这是最让人困惑的点。
- 必须写成
-webkit-text-stroke: 2px red;，标准语法text-stroke可以留着但不起作用 - 要搭配
-webkit-text-fill-color: transparent;才能看清描边，否则描边会被实心文字盖住 - 不能只设描边宽度不设颜色，
-webkit-text-stroke: 2px;无效，会退回到默认黑色描边（且不一定显示）
描边颜色怎么做到“多样化”而非单一色
所谓多样化，本质是让描边能响应不同状态或数据，不是靠一个属性变出彩虹——-webkit-text-stroke 本身只接受单色值（rgb()、hsl()、命名色、变量等），但可以配合 CSS 自定义属性或 JS 动态更新。
- 用 CSS 变量最灵活：
--stroke-color: #ff6b6b;，然后写-webkit-text-stroke: 1.5px var(--stroke-color); - JS 修改时直接改元素 style：
el.style.webkitTextStroke = '2px #4ecdc4';（注意驼峰写法） - 别用
currentColor做描边色，它取的是color值，而描边常需和文字色形成对比，容易混淆语义
描边太细看不清？宽度和字体大小的关系
-webkit-text-stroke 的宽度是绝对像素值，不随 font-size 缩放。小字号下设 2px 描边会糊成一团，大字号下设 1px 又几乎不可见。
- 安全做法：描边宽度 ≈
font-size的 3%–6%，比如font-size: 32px时用1px～2px - 避免用
em或rem单位，-webkit-text-stroke: 0.05em #000;无效，只认px、pt等绝对单位 - 超细字体（如
font-size: 12px）慎用描边，优先考虑text-shadow模拟，兼容性更好
替代方案：text-shadow 能否模拟多色描边
可以，而且更兼容。虽然不是真描边，但用 8 个方向的 text-shadow 能逼近均匀描边效果，还能分层设不同颜色（比如外圈红、内圈蓝）。
- 基础八向写法：
text-shadow: 1px 1px 0 #f00, -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00, 1px 0 0 #f00, -1px 0 0 #f00, 0 1px 0 #f00, 0 -1px 0 #f00; - 性能注意：阴影层数越多，重绘开销越大，动态文本频繁更新时可能卡顿
- 和
-webkit-text-stroke互斥：两者同时存在时，text-shadow在上层，描边在下层，视觉上可能打架
真要多色描边，目前没浏览器原生支持“渐变描边”或“多层描边”，所有方案都是妥协。关键看你要保兼容性，还是只跑最新 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
