linear-gradient语法错误会导致背景完全不显示；必须显式指定方向、逗号分隔颜色、合理设置色标位置，注意background层叠顺序及浏览器角度解析差异。
linear-gradient 语法写错会导致背景完全不显示
浏览器对 linear-gradient 的语法非常严格，少一个逗号、漏掉方向关键词、或者颜色值格式错误，整个背景就会回退成透明——不是“渐变不对”，而是“根本没渲染”。常见错误包括：linear-gradient(red, blue)（缺方向，默认值在部分旧浏览器里不生效）、linear-gradient(0deg red, blue)（角度和颜色之间缺逗号）、用十六进制简写如 #ff0 在 IE 中可能被忽略。
- 始终显式写方向：用
to top/to bottom（推荐）或0deg/180deg，避免依赖默认值 - 颜色之间必须用逗号分隔：
linear-gradient(to right, #f00, #00f)，不是空格 - IE10+ 支持带
-ms-前缀的版本，但只认to bottom这类关键字，不支持角度写法
多色停靠点位置不写清楚，渐变会“意外拉长”或“堆叠失效”
如果不指定颜色停靠位置，浏览器会把所有颜色平均分配。比如 linear-gradient(to right, red, yellow, blue) 实际是 red 0%, yellow 50%, blue 100%，中间黄色区域太窄，视觉上几乎看不到。更隐蔽的问题是：当两个颜色停靠点重合（如 red 20%, red 20%），会产生硬边；而相邻停靠点间隔过小（如 red 20%, blue 20.1%），在高 DPI 屏幕上可能渲染出噪点。
- 关键过渡色建议手动标位置：
linear-gradient(to right, #f00 0%, #ff0 50%, #00f 100%) - 想做“色带”效果（比如红→黄→黄→蓝），重复写同一颜色并微调位置：
#ff0 49%, #ff0 51% - 百分比值支持小数，但低于 0.1% 的差异通常无实际意义，反而增加解析负担
background-image 和 background-color 同时设，渐变会被覆盖
很多人习惯先写 background-color 再写 background-image，以为后者会叠加在前者之上。但实际上，background-image（含 linear-gradient）属于背景层的“图像层”，background-color 是“纯色层”，二者是同一背景堆栈里的不同层级——background-image 永远在 background-color 上方，但如果你写了 background: #fff 这种简写，它会**清空**之前所有 background-image 设置。
- 要么全用
background简写（但必须把渐变写在最前面）：background: linear-gradient(...), #fff - 要么分开写，且确保
background-image在background-color之后（它不会被覆盖） - 调试时可临时加
background-size: 200% 200%验证渐变是否真的加载了
移动端 Safari 对渐变角度的解析和 Chrome 不一致
iOS 15.4 之前的 Safari 把 45deg 解析为从左下到右上，而 Chrome 是从左上到右下，方向相反。这不是 bug，是规范里对“角度起点”的定义差异：Safari 沿用旧 WebKit 行为（0deg = 正右），Chrome 遵循 CSS Image Level 4（0deg = 正上）。结果就是同一段代码，在 iPhone 上看起来是“横着渐变”，在安卓机上却是“斜着渐变”。
- 绕过角度歧义的最稳方案：统一用
to关键字，如to bottom right、to top - 如果必须用角度，测试时务必真机连 Safari 开发者工具，不能只信模拟器
- 注意：CSS 变量无法在
linear-gradient内直接使用颜色值（如var(--main)），需用color-mix()或 JS 注入
渐变本身很简单，难的是各浏览器对“方向”“停靠点精度”“层叠顺序”的隐性理解差异。写完别急着提交，用 Safari、Firefox、Chrome 的真机模式各刷一遍，重点看边缘过渡和首屏加载瞬间——那里最容易暴露兼容性断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
