linear-gradient() 必须显式声明方向、颜色间用逗号分隔、色标位置需手动指定，且 background-image 会覆盖 background-color；语法错误或层叠顺序不当会导致背景完全透明。
linear-gradient() 写错方向会导致背景完全消失
浏览器对 linear-gradient() 的语法非常敏感，漏掉方向关键词或角度值，整个背景就会回退为透明——不是“渐变没生效”，而是“压根没解析成功”。linear-gradient(red, blue) 在现代浏览器里可能侥幸显示（依赖默认 to bottom），但在 IE10、旧版 Safari 或某些构建工具中会直接失效。
必须显式声明方向：
-
to top/to bottom/to right/to left—— 推荐，语义清晰，兼容性好 -
0deg/90deg/180deg—— 精确控制，但注意 iOS 15.4 之前 Safari 对角度解析和 Chrome 不一致 -
to bottom right这类双关键词写法要连写，不能加空格：to bottomright是错的
颜色之间漏逗号会让整个渐变失效
这是最常被忽略的硬伤。linear-gradient(to right #f00 #00f) 看起来像语法糖，实际是非法值，浏览器直接丢弃整条声明。CSS 不接受空格分隔颜色，只认逗号。
正确写法必须带逗号：
linear-gradient(to right, #f00, #00f)linear-gradient(45deg, rgba(255,0,0,0.8), hsl(240,100%,50%))- 十六进制简写如
#ff0在 IE 中可能被忽略，建议用完整六位#ffff00或函数格式
不设色标位置会导致颜色过渡“看不见”
写 linear-gradient(to right, red, yellow, blue) 时，浏览器自动分配位置：red 0%，yellow 50%，blue 100%。结果黄色只占中间极窄一段，肉眼几乎无法识别。
想让某种颜色更突出，必须手动指定停靠点：
-
linear-gradient(to right, red 0%, yellow 30%, blue 100%)—— 黄色区域拉宽到 30% -
linear-gradient(to right, #f00 0%, #f00 20%, #00f 20%, #00f 100%)—— 实现红→蓝硬边分割（常用于卡片分界） - 相邻停靠点间隔小于 0.1%（如
red 20%, blue 20.05%）在高 DPI 屏上可能渲染出噪点，没必要追求过度精确
background-color 和 background-image 的层叠关系容易搞反
很多人习惯先写 background-color: #fff，再写 background-image: linear-gradient(...)，以为后者会叠在前者之上。实际上，background-image 永远覆盖在 background-color 上方——但前提是它没被简写清空。
致命陷阱：
-
background: #fff会**彻底清除**之前设置的background-image - 正确做法一：用简写且把渐变放最前 ——
background: linear-gradient(to bottom, #000, #fff), #fff - 正确做法二：分开写，且确保
background-image在background-color之后 —— 浏览器按属性顺序叠加，后写的图像层不会被先写的纯色层覆盖
调试时可临时加 background-size: 200% 200%，如果看到放大后的渐变块，说明它确实加载了；如果还是空白，问题一定出在语法或层叠逻辑上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
