全屏背景渐变需用css linear-gradient()配合min-height:100vh等容器样式实现；direction必须显式书写，语法错误会导致声明被静默丢弃；颜色逗号分隔、大小写敏感、单位不可省；移动端慎用background-attachment:fixed。
HTML 本身不支持渐变，所谓“全屏背景色渐变”，实际是用 CSS 的 linear-gradient() 配合容器样式实现的；方向写错、漏单位、少逗号，轻则渐变不出现，重则整个背景变透明——不是没生效，是浏览器直接丢弃了那条声明。
direction 参数必须显式写，不能省略或拼错
linear-gradient() 没有默认安全方向：虽然规范说默认是 to bottom，但 Safari 5.1–6.0、老版 Android WebView、某些未启用 autoprefixer 的构建流程会因语法歧义直接跳过整条规则。写成 linear-gradient(red, blue) 等于裸奔。
- 正确关键词写法：
to right（左→右）、to bottom right（注意中间空格，不是to-bottom-right） - 角度写法更可控：
45deg（单位deg不可省），0deg是从下往上（等价于to top），不是从左到右 - 错误示例：
right、toright、to_right、45—— 全部失效
颜色列表必须用英文逗号分隔，且不能多加逗号
浏览器对 linear-gradient() 语法极其严格：漏一个逗号、多一个空格、颜色后多加逗号，整条 background 声明就会被静默丢弃，回退到父级背景或透明，页面“露底”就是这么来的。
- 正确：
linear-gradient(to right, #ff6b6b, #4ecdc4) - 错误：
linear-gradient(to right #ff6b6b #4ecdc4)（空格分隔 → 失效） - 错误：
linear-gradient(to right, #ff6b6b, #4ecdc4, )（末尾逗号 → 失效） - 大小写敏感：
to right合法，To Right或TO RIGHT在部分旧引擎中可能不认
全屏效果靠容器样式撑开，不是渐变函数自己负责
渐变本身是一张“图像”，它不会自动铺满屏幕；如果容器高度只有几像素（比如空 ），linear-gradient() 就会被默认重复平铺，出现红蓝条纹，而不是你想要的平滑过渡。
- 必须设
min-height: 100vh，否则内容少时根本撑不满视口 - 显式写
background-repeat: no-repeat，别依赖background简写的隐式行为 - 推荐组合：
background-image: linear-gradient(...); background-size: cover; min-height: 100vh; margin: 0; - 用
background-image而非background简写，避免意外清空background-colorfallback
移动端慎用 background-attachment: fixed
在 iOS Safari（尤其 iOS 16.4 之前）上，background-attachment: fixed + linear-gradient() 是已知渲染管线缺陷触发器：滚动时闪烁、错位、甚至白屏。这不是性能问题，是 WebKit 底层 bug，模拟器还复现不了。
- 绕过方案：去掉
fixed，改用transform: translateZ(0)强制硬件加速，再配合 JS 动态调background-position - 更稳替代：放弃视差，用
@keyframes驱动background-position循环变化（如0% 0%, 100% 100%） - 别信“加了
will-change: transform就能修好”——该 bug 与是否声明will-change无关
最易被忽略的是 fallback 色和容器高度：渐变失效时，如果没有 background-color，页面就真的一片空白；而 min-height: 100vh 写在错误层级（比如只写了子 div，没管 或 ），照样拉不出全屏效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
