text-stroke不支持多色描边，仅webkit内核支持单色；实现多色描边需用text-shadow多层叠加模拟，全浏览器兼容但性能受限；响应式描边推荐css自定义属性控制。
text-stroke 不支持多色描边，别白费劲试了
text-stroke 是 WebKit 内核专属的非标准属性，它只接受单色值（color 或 transparent），语法上根本不允许写多个颜色、渐变或颜色列表。你写 text-stroke: 2px red, blue 或 text-stroke: 2px linear-gradient(...)，浏览器直接忽略整条声明——连警告都不会抛。
想让文字描边有不同颜色？只能用 text-shadow 模拟
真正能控制“每层描边颜色不同”的，只有 text-shadow。它的原理是叠加多层阴影，每一层可独立设偏移、模糊和颜色，组合起来就能模拟出分层描边效果。
- 第一层：左上偏移
text-shadow: -1px -1px 0 #f00 - 第二层：右上偏移
, 1px -1px 0 #0f0 - 第三层：左下偏移
, -1px 1px 0 #00f - 第四层：右下偏移
, 1px 1px 0 #ff0
注意：所有偏移量必须为 0 模糊半径，否则边缘会虚化，失去“描边”锐利感；各层顺序不影响最终视觉，但建议按方向逻辑排列，方便后续维护。
text-stroke 和 text-shadow 的兼容性差异很大
text-stroke 只在 Safari、Chrome、Edge（基于 Chromium）中可用，Firefox 完全不支持，且没有启用计划；text-shadow 则是全浏览器支持的 CSS2.1 标准属性，连 IE9 都能跑。
- 用
text-stroke→ 必须加-webkit-text-stroke前缀，且得准备降级方案 - 用
text-shadow→ 无需前缀，但描边宽度受限于阴影层数和性能：描边太粗（比如 4px）就得堆 16+ 层 shadow，渲染开销明显上升 - 移动端 iOS Safari 对大量
text-shadow层的重绘效率偏低，滚动时可能掉帧
描边颜色要响应式变化？别绑定 class 切换，用自定义属性更稳
如果描边颜色需随主题切换（比如深色/浅色模式），硬写多套 text-shadow 值容易漏改、难维护。直接用 CSS 自定义属性 + var() 更可靠：
h1 {
--stroke-top: #ff6b6b;
--stroke-right: #4ecdc4;
--stroke-bottom: #44b5b1;
--stroke-left: #ffe66d;
text-shadow:
-1px -1px 0 var(--stroke-top),
1px -1px 0 var(--stroke-right),
-1px 1px 0 var(--stroke-bottom),
1px 1px 0 var(--stroke-left);
}
这样换主题只需改变量值，不用动结构；也避免 JS 动态拼接字符串出错。唯一要注意的是：CSS 变量不能用在伪元素的 content 里，但描边本身不受影响。
text-shadow 多层叠加会让边缘发虚，看起来像没对齐。这时候得手动调偏移量到 0.5px 级别，或者干脆放弃描边，改用 background-clip: text + text-fill-color: transparent 配合渐变背景。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
