text-stroke不支持渐变，唯一跨浏览器可行方案是多层text-shadow模拟；background-clip:text仅填充文字非描边，且firefox完全不支持该属性。
text-stroke 本身不支持渐变，别白费劲试 background-image
-webkit-text-stroke 只接受纯色值，比如 2px #ff6b6b 或 1px rgba(0,0,0,0.7)。你给它塞 linear-gradient() 会直接被浏览器忽略——CSS 解析器根本不认这个组合。网上有些“伪代码”把 background-image 往 -webkit-text-stroke 里硬套，结果只是背景在动，描边纹丝不动。
真正能“模拟”渐变描边的只有 text-shadow 多层叠加
用 text-shadow 在文字四周堆叠多层不同偏移、不同模糊、不同颜色的阴影，视觉上能骗过人眼，形成“渐变描边”感。这不是真描边，但目前唯一跨浏览器可行的方案。
- 每层
text-shadow的h-offset和v-offset要微调（±0.5–2px），避免出现空隙或重影过厚 - 模糊半径（
blur-radius）建议统一设为0或1px，太大容易糊成一团，失去描边锐度 - 颜色顺序按渐变方向排：比如左→右渐变，就从左层用深色、右层用浅色，中间插过渡色
- Firefox 和 Safari 对超过 8 层
text-shadow渲染可能卡顿，实测 4–6 层平衡效果与性能
示例：text-shadow: -2px -2px 0 #6a11cb, 2px -2px 0 #8a2cd2, 2px 2px 0 #2575fc, -2px 2px 0 #1a5bd9;
background-clip + transparent 填充只能做渐变文字，不是描边
很多人混淆了两个效果：background-clip: text 是让渐变“填进字里”，目标是文字本体变渐变；而描边是围绕文字轮廓的一圈线。这两者技术路径完全不同，不能混用。
- 如果你写了
background: linear-gradient(...); -webkit-background-clip: text; color: transparent;，得到的是渐变填充文字，不是描边 - 想叠加描边，必须额外加
-webkit-text-stroke（纯色）或text-shadow（模拟渐变） - 注意顺序：先定义
background-clip渐变文字，再叠text-shadow描边，否则阴影会被透明文字吃掉
Firefox 完全不支持 background-clip: text，渐变文字+描边组合天然残缺
哪怕你把 -webkit-background-clip、background-clip、-webkit-text-fill-color、color 全写齐，Firefox 仍会无视 background-clip: text，直接 fallback 成块级背景——文字变纯黑或继承父级 color。这意味着：任何依赖该属性的“渐变文字+描边”方案，在 Firefox 下必然降级。
能做的只有两件事：用 @supports (background-clip: text) 包裹渐变逻辑，给 Firefox 单独写回退样式（比如纯色 + text-shadow 描边）；或者彻底放弃渐变文字，专注用 text-shadow 模拟整套效果——后者反而兼容性更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
