-webkit-text-stroke不支持渐变描边，因其color值仅接受单色，Chrome/Safari静默丢弃渐变值，Firefox完全不支持；可用text-shadow（8层偏移）或SVG（原生渐变stroke）实现。
纯 -webkit-text-stroke 无法实现多色渐变描边——它只接受单色值，且 Firefox 完全不支持。真要做出“渐变色描边”，必须绕过该属性，用 text-shadow 或 SVG 实现。
为什么 -webkit-text-stroke 不支持渐变描边
-webkit-text-stroke 是一个简写属性，语法固定为 -webkit-text-stroke: ，其中 #ff0000 或 rgba(0,0,0,0.8)），不能是 linear-gradient() 或其他函数。尝试传入渐变会直接被浏览器忽略。
- Chrome / Safari：静默丢弃无效值，回退到默认无描边
- Firefox：完全无视该属性，连单色描边都不渲染
- 即使加了
background-clip: text，也无法作用于描边层——它只裁剪背景，不干预 stroke
用 text-shadow 模拟渐变描边的实操要点
核心思路是用 8 层 text-shadow 构成封闭描边路径，每层设不同颜色和 ±1px 偏移，blur-radius 必须为 0，否则边缘发虚、颜色混叠。
- 必须写全 8 个方向：
-1px -1px 0、0 -1px 0、1px -1px 0、1px 0 0、1px 1px 0、0 1px 0、-1px 1px 0、-1px 0 0 - 文字色必须设为
color: transparent，否则内部填充会盖住描边 - 避免在 Safari iOS 15–16 上丢影：不要用 CSS 自定义属性传
text-shadow值，内联写死 - 小字号（≤16px）下慎用：像素级偏移易错位，建议 ≥24px 起步
.multi-stroke-text {
color: transparent;
text-shadow:
-1px -1px 0 #ff0000,
0px -1px 0 #ff6b6b,
1px -1px 0 #ffd93d,
1px 0px 0 #4ecdc4,
1px 1px 0 #44b5b1,
0px 1px 0 #3a86ff,
-1px 1px 0 #8338ec,
-1px 0px 0 #ff006e;
}
更稳但更重的方案：SVG +
SVG 的 stroke 和 stroke-width，且可通过
- 需把文字转为 SVG 内联结构，无法继承父级字体设置（如
font-family需显式声明） -
fill="none"确保只显示描边，不填充内部 - 渐变定义必须放在
url(#id)引用 - 响应式排版时，需同步缩放
stroke-width，否则描边粗细会失衡
<svg viewbox="0 0 300 100"><defs><lineargradient id="stroke-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#ff0000"></stop><stop offset="100%" stop-color="#0000ff"></stop></lineargradient></defs><text x="20" y="60" font-size="48" font-family="Arial" fill="none" stroke="url(#stroke-grad)" stroke-width="3">SVG渐变描边</text></svg>
真正难点不在怎么写，而在权衡：用 text-shadow 快但脆弱，尤其在 Safari 和低端 WebView 上；用 SVG 精准但侵入 DOM 结构、维护成本高。如果项目已重度依赖 WebKit（如企业内嵌 WebView），可优先试 text-shadow；若需跨平台稳定输出，SVG 是目前唯一可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
