background-clip: text 实现文字渐变需同时设置 -webkit-text-fill-color: transparent 以清除 webkit 内核抗锯齿灰边；方向、颜色节点、前缀、dom 更新四变量缺一不可；linear-gradient() 拼接须严格语法；兼容性需 @supports 检测降级；svg 方案优先于 canvas；预览区元素必须设 display: inline-block 或 block。
直接用 background-clip: text 配合 linear-gradient() 就能生成可落地的文字渐变效果，但想做成“在线生成器”，核心不是堆功能，而是控制好四类变量：方向、颜色节点、浏览器前缀、DOM 更新方式——漏掉任一环，用户粘贴代码就失效。
为什么 background-clip: text 必须配 -webkit-text-fill-color: transparent
Chrome 和 Safari 渲染文字渐变时，color: transparent 在某些版本（尤其是 Safari 16.4+ 和 Chrome 122+）会意外保留抗锯齿灰边，导致渐变边缘发虚；而 -webkit-text-fill-color: transparent 是 WebKit 内核专属属性，绕过字体渲染层的默认填充逻辑，强制清空文字本体。两者必须共存：
-
-webkit-background-clip: text和background-clip: text缺一不可，Firefox 125+ 支持后者，但 Safari 仍只认前者 -
-webkit-text-fill-color: transparent是刚需，color: transparent只能当 fallback，不能省略 - 如果生成器输出里漏了
-webkit-text-fill-color，用户在 iOS Safari 上大概率看到纯黑字或半透明残影
动态拼接 linear-gradient() 字符串时的三个硬约束
生成器内部拼 CSS 字符串，不是简单把颜色数组 join(',') 就完事。Safari 17.4 和旧版 Android WebView 对语法容错极低：
- 方向参数必须显式写
to right或90deg，不能留空或传""；拼成linear-gradient(, #f00, #0f0)会直接失效 - 每个颜色值之间必须有且仅有一个空格，
linear-gradient(to right,#f00,#0f0)（逗号后无空格）在 iOS 16.6 Safari 中解析失败 - 颜色格式必须原样透出：用户输
rgba(255,0,0,0.8)就不能自动转成#ff0000，透明度差异会导致视觉断层
生成器必须内置的兼容性分流逻辑
不能只靠加 -webkit- 前缀应付所有场景。IE ≤ 9、部分企业内网 WebView、旧版 TBS 内核对 background-clip: text 完全不支持，此时必须降级：
- 用
@supports (background-clip: text)检测，不支持时 fallback 到单色color: #3b82f6+ 简单阴影模拟层次感 - 避免使用
filter: drop-shadow()作为主方案——它在高 DPI 屏幕下易糊，且无法精确匹配渐变色阶 - 若用户勾选“导出 SVG 方案”，生成器应直接输出
<svg><defs><lineargradient id="g"><stop offset="0%" stop-color="#f00"></stop></lineargradient></defs><text fill="url(#g)">文本</text></svg>，而不是试图用 JS 绘制 canvas
最常被忽略的是 display 类型：生成器预览区若用 <span></span> 默认 inline，没设 display: inline-block 或 block，即使 CSS 全对，预览也完全不显示渐变——因为 inline 元素不支持 background-clip: text。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
