linear-gradient未生效主因是元素无尺寸、被background-color覆盖、缺方向参数或语法错误；应设高度、用background复合属性、显式声明方向及颜色值，并用开发者工具验证。
background-image: linear-gradient 没生效的常见原因
直接写 background-image: linear-gradient(...) 却看不到渐变，大概率不是语法错，而是被其他样式覆盖、缺少必要参数，或元素本身没尺寸。
- 元素
height为0（比如空div未设高，或内容塌陷） - 被更优先的
background或background-color覆盖（background是复合属性，会重置整个背景） - 漏写了方向参数，如写成
linear-gradient(red, blue)—— 这在旧版浏览器中可能不兼容，现代浏览器虽支持，但推荐显式声明 - 颜色值写错，比如
red#ff0000连在一起（应为red或#ff0000）
标准写法：方向 + 颜色停靠点必须明确
最稳妥的写法是带方向关键词（to bottom、45deg 等）和至少两个颜色值。方向决定渐变轴线，缺省时部分浏览器按 to bottom 处理，但不保证跨浏览器一致。
background-image: linear-gradient(to bottom, #f0f0f0, #ccc); background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4); background-image: linear-gradient(to right, rgba(255,255,255,0.8), transparent);
注意：to right 和 90deg 等价，但前者语义清晰、可读性好；角度单位必须带 deg，写 90 不生效。
被 background-color 覆盖？检查层叠顺序
background-color 会盖住 background-image，哪怕后者写在后面。因为 background-color 属于「背景绘制层」的底层，而 background-image 在其上 —— 但若两者都在同一声明块里，background 复合属性会清空之前所有背景设置。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：先设
background-color: white，再写background-image: linear-gradient(...)→ 渐变仍不可见 - ✅ 正确：统一用
background，或确保background-color为transparent - ✅ 更安全：只用
background复合写法，例如：background: linear-gradient(to bottom, #eee, #aaa), #fff;（逗号前是图像层，后是纯色层）
调试建议：三步快速定位
别猜，用开发者工具逐项验证：
- 选中元素，在 Styles 面板看
background-image是否被划掉（表示被覆盖）或显示为none - 检查 Computed 标签页里的
background-image值，确认是否解析成功（失败时会显示none） - 临时加
border: 1px solid red或min-height: 20px，排除「元素没尺寸」这个最隐蔽的问题
渐变本身不难，难的是它太安静 —— 不报错、不警告，只默默消失。真正卡住的，往往是那个没设 height 的 div，或者一行被注释掉的 background: #fff。
