iOS Safari 渐变文字需同时满足四条件：-webkit-background-clip: text、color: transparent、-webkit-text-fill-color: transparent、display: inline-block/block，缺一不可。
移动端渐变文字在 iOS Safari 上大概率不显示，除非你同时满足四个条件：加 -webkit-background-clip: text、设 color: transparent、补 -webkit-text-fill-color: transparent、且元素是 inline-block 或 block。
为什么 background-clip: text 在手机上经常失效
这不是写法错，而是移动端浏览器（尤其是 iOS Safari 15.4–16.2 和旧版 Android WebView）对 background-clip: text 的支持非常苛刻：
- 只认
-webkit-background-clip: text，标准版background-clip: text被直接忽略 -
color: transparent必须显式声明——用rgba(0,0,0,0)或hsla(0,0%,0%,0)会被 iOS Safari 当作不透明处理 - 默认的
display: inline元素不触发裁剪，必须手动设为inline-block或block - 父容器若有
overflow: hidden、filter、will-change或opacity < 1，Safari 会直接回退到纯色文字
必须写的四行 CSS 才能跑通 iOS 和主流安卓
缺一不可，顺序建议按以下排列（前缀优先，兼容兜底）：
.gradient-text {
display: inline-block;
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
-
display: inline-block是硬性前提，别指望靠float或position替代 -
linear-gradient(90deg, ...)比to right更稳定，iOS 对关键词解析偶有偏差 - 两个透明声明必须共存：
color: transparent对 Firefox/Edge 生效，-webkit-text-fill-color: transparent是 Safari/Chrome 的命门 - 别用 Autoprefixer 自动补前缀——它对
background-clip: text的识别率极低，容易漏掉
遇到文字闪退、变黑或只显示一半怎么办
这是 iOS WebKit 渲染管线的已知缺陷，不是代码 bug。常见于文字加粗（font-weight: bold）或快速滚动后：
立即学习“前端免费学习笔记（深入）”；
- 临时修复：给元素加
-webkit-transform: translateZ(0)强制 GPU 合成 - 更稳方案：把文字包进
<div>，并确保其父容器没有overflow: hidden - 彻底规避：对 iOS 15.4–16.2 用户，用
@supports (-webkit-background-clip: text)做特性检测，fallback 到纯色 - 老安卓（Android 4.4–6.0）根本没救——WebView 不支持该属性，连前缀都无效，此时直接换 SVG 文字
渐变方向和文字长度不匹配导致颜色“挤在一起”
linear-gradient 默认按元素盒模型铺满，短文字下渐变起点和终点可能全落在一个字里：
- 加
background-size: 200% 200%扩大渐变画布，再配background-position: -50% -50%居中对齐文字 - 竖排文字（
writing-mode: vertical-rl）必须用0deg或to bottom，否则渐变横着切过字形 - 斜向渐变（如
45deg）在小字号或细字体下易断裂，建议搭配font-weight: 600以上使用 - 别用
repeating-linear-gradient——移动端重绘压力大，Retina 屏易出锯齿
最常被忽略的一点：渐变文字无法被屏幕阅读器正确识别颜色语义，且打印时默认不渲染背景。如果项目涉及可访问性或 PDF 导出，得额外准备降级文案或 aria-label 备份。
