文字未显示渐变的最常见原因是漏写 color: transparent，因浏览器默认用实色绘制文字，会覆盖 background-clip: text 设置的渐变；该特性在 firefox 117+ 及主流浏览器中已稳定支持，但旧版 safari 不兼容。
直接用 background-clip: text 配合 linear-gradient() 就能实现，但必须加 color: transparent，否则渐变会被文字原始颜色盖住。
为什么文字没显示渐变？
最常见原因是漏写了 color: transparent。浏览器默认会把文字画成实色，哪怕你设置了背景渐变，它也会盖在上面。另外，background-clip: text 在 Firefox 117+ 和 Chrome/Safari/Edge 中已稳定支持，但旧版 Safari（-webkit-background-clip: text。
线性渐变 vs 径向渐变怎么选？
linear-gradient() 更常用，适合标题、按钮等强调方向感的场景；radial-gradient() 适合营造光晕、聚焦效果，比如 logo 文字或徽章文案。
- 水平渐变：
background: linear-gradient(to right, #ff7a00, #ff0080) - 垂直渐变：
background: linear-gradient(to bottom, #4facfe, #00f2fe) - 径向渐变：
background: radial-gradient(circle, #4facfe 0%, #00f2fe 100%)
移动端和小字号下容易糊？
这是渲染精度问题，尤其在 iOS Safari 上。解决办法有三个：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 加
-webkit-text-stroke: 0.5px transparent，轻微描边可提升边缘锐度 - 避免用太细的字体（
font-size小于 16px 时风险高） - 禁用亚像素抗锯齿：
-webkit-font-smoothing: antialiased（仅限 WebKit）
要不要加降级方案？
要，而且得简单有效。别写一堆 JS 检测，直接用层叠：
.gradient-text {
color: #333; /* 默认纯色 fallback */
background: linear-gradient(45deg, #ff7a00, #ff0080);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
不支持 background-clip: text 的浏览器（如 IE 或极老安卓 WebView）会忽略后面两行，直接显示 color: #333 —— 这就是最稳妥的降级。
实际项目里，渐变文字不是“能不能做”，而是“在哪种上下文里稳得住”。字体粗细、容器宽度、是否参与动画、是否被 transform 缩放……这些细节比语法本身更容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
