HTML本身不支持渐变，所有渐变均依赖CSS的linear-gradient()实现；必须显式声明方向（如to right或45deg）、颜色间用逗号分隔、添加fallback色，否则语法错误会导致背景透明或失效。
直接说结论：HTML 本身不支持渐变，所有渐变都靠 CSS 的 linear-gradient() 实现；写错方向、漏逗号、没 fallback，轻则渐变不显示，重则整个背景变透明。
为什么 linear-gradient() 必须显式写方向
默认方向是 to bottom，但老版 Safari、Android WebView 和部分构建工具（如未启用 autoprefixer 的旧配置）会因语法歧义直接丢弃整条声明。写成 linear-gradient(red, blue) 看似省事，实际等于裸奔。
- 正确写法必须带方向关键词：
to right、to bottom right（注意中间有空格，不是to-bottom-right） - 用角度更可控，但单位不能省：
45deg有效，45无效 -
0deg是从下往上（等价于to top），不是从左到右——别被直觉骗了
颜色之间漏逗号或拼错关键词会怎样
浏览器对 linear-gradient() 语法极其严格：漏一个逗号、多一个空格、把 to right 写成 right，整条 background 声明就会被完全忽略，回退到父级背景或透明——页面“露底”就是这么来的。
- 错误示例：
linear-gradient(to right #ff6b6b #4ecdc4)（空格分隔 → 失效） - 正确写法：
linear-gradient(to right, #ff6b6b, #4ecdc4)（逗号分隔，末尾不加逗号） - 关键词大小写敏感：
toright、toRight、to right中只有最后一个合法
为什么推荐用 background-image 而不是 background
linear-gradient() 返回的是 <image> 类型值，语义上属于图像，不是颜色。用 background 简写会隐式重置 background-color、background-repeat 等所有子属性，容易埋坑。
立即学习“前端免费学习笔记（深入）”；
- 安全写法是拆开：
background-color: #6a11cb;+background-image: linear-gradient(to right, #ff6b6b, #4ecdc4); - 这样即使渐变失效，至少有 fallback 色；多层渐变（如叠加遮罩）也必须用
background-image配逗号分隔 - 记得配
background-size: cover;，否则在不同屏幕下极易拉伸或只显示一角
移动端 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%） - 真机调试务必连 iPhone 开 Safari 开发者工具——别信 Chrome DevTools 模拟的“fixed 效果”
最容易被忽略的是 HSL 插值：写 red 和 blue，浏览器按 RGB 插值，中间必然经过灰暗带；要顺滑鲜艳，得手动写 hsl(0, 100%, 50%) → hsl(240, 100%, 50%)，且 s 和 l 后必须跟 % 符号。
