linear-gradient语法错误会导致背景完全不显示；必须显式声明方向（to top/to right或45deg）、添加-webkit-前缀兼容旧版iOS/安卓、background-color需置于background-image之前以实现底色兜底。
linear-gradient 语法写错会导致背景完全不显示
浏览器对 linear-gradient 的语法容错极低，少一个逗号、漏掉单位、颜色值格式不对，整个背景就会回退成透明或默认色，而不是报错提示。常见错误包括：linear-gradient(0, red, blue)（缺 deg 或 to bottom）、linear-gradient(red, #0000ff)（没写方向参数，旧版 Chrome 会直接失效）。
- 方向必须显式声明：用
to top/to right或角度如45deg，不能只写数字 - 颜色值支持
rgb()、hsl()、十六进制、关键字，但transparent要慎用——它不是“透明色”，而是 alpha 为 0 的真实颜色，在部分安卓 WebView 中表现异常 - 多色停靠点建议写单位：比如
red 0%, #ff0 50%, blue 100%，不写 % 时，浏览器按“位置数值”解析（如red 0是合法的，但red 50表示 50px，容易误判）
CSS 渐变在 Safari 和旧版 Android 上兼容性差
linear-gradient 在 iOS 13.4+ 和 Android 10+ 基本无坑，但 iOS 12 及更早版本要求带 -webkit- 前缀，且只认 to bottom 这类关键词，不支持角度写法；部分国产安卓 WebView（如微信内置）仍依赖前缀且对空格敏感。
- 生产环境务必加前缀：在
background-image中同时写-webkit-linear-gradient和标准写法，后者覆盖前者 - 避免用
90deg代替to right—— iOS 12 Safari 不支持角度语法 - 如果渐变用于按钮悬停态，记得给
transition加上background-image，否则 Safari 下动画会跳变
渐变背景和 background-color 同时设置时，后者会被忽略
background-color 和 background-image: linear-gradient(...) 可以共存，但顺序很重要：CSS 层叠中，background-image 绘制在 background-color 之上。如果没设透明度或停靠点留白，background-color 就完全看不见。
- 想让底色兜底，把
background-color放在前面，再叠加background-image，例如：background-color: #f0f0f0;<br>background-image: linear-gradient(to right, #ff0, #00f);
- 如果渐变本身有透明区域（比如
rgba(255,0,0,0.2)），底色才会透出；纯色渐变下，底色毫无作用 - 不要试图用
background: #f0f0f0 linear-gradient(...)简写——这会清空background-color，只保留渐变
用渐变做 loading 动画时，background-position 位移要配合 background-size
纯 CSS 渐变动画（如模拟骨架屏流动效果）依赖 background-position 位移，但若不配 background-size，位移距离难控制，容易出现断层或卡顿。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
background: linear-gradient(90deg, transparent, #eee, transparent);<br>background-size: 200% 100%;<br>animation: loading 2s infinite;
再定义@keyframes loading { to { background-position: 200% 0; } } -
background-size必须大于 100%，否则background-position移动无效；推荐用200% 100%配合to { background-position: 200% 0 }实现平滑循环 - 在低性能设备上，避免用
background-position-x单独动画——触发重排，改用transform: translateX()+background-clip: text等替代方案更稳
