linear-gradient() 是生成渐变图像值而非引入，语法错误会导致背景完全透明；需注意方向参数、逗号分隔、简写覆盖、颜色兼容性及位置控制等关键约束。
linear-gradient() 不是“引入”渐变色，而是直接生成一个渐变图像值，用作 background-image 的内容。写错语法或忽略关键约束，背景会彻底消失——不是变淡、不是错位，是透明。
为什么 background: linear-gradient(...) 有时完全不显示？
根本原因：浏览器对 linear-gradient() 的解析极其严格，任何格式偏差都会导致整个函数被丢弃，回退为透明背景。
-
linear-gradient(red, blue)在旧版 Safari 或 IE 中可能失效（缺方向参数） -
linear-gradient(45deg red, blue)缺逗号 → 解析失败 -
background: #fff; background-image: linear-gradient(...)没问题；但background: #fff linear-gradient(...)会清空渐变（background简写覆盖了所有子属性） - 颜色值写成
#f00在 IE10–11 中部分支持，但#ff0000更稳妥
to right 和 90deg 有区别吗？
语义一致，但渲染行为在非正方形容器中可能不同：前者按逻辑方向（左→右），后者按数学角度（x 轴顺时针 90°）。实际项目中建议统一用 to 关键词，可读性高且兼容性更稳。
-
to right：从左边缘开始，向右延伸，填满整个宽度 -
90deg：渐变线与 x 轴夹角为 90°，起点在容器中心偏左下（取决于实现），在宽高比极端的容器里可能切掉一部分渐变 - 两者在现代 Chrome/Firefox/Edge 中视觉几乎无差别，但
to bottom right比135deg更明确表达“对角”意图
怎么让三色渐变中中间色显眼？
不指定位置时，浏览器把颜色平均分配：linear-gradient(red, yellow, blue) 实际是 red 0%, yellow 50%, blue 100%，黄色只占中间窄带，肉眼难辨。
- 显式标注位置：
linear-gradient(to right, red 0%, yellow 30%, yellow 70%, blue 100%) - 想做硬边过渡（如色块拼接），重复同一颜色并微调位置：
yellow 49.9%, yellow 50.1% - 百分比支持小数，但
0.05%级别差异在多数屏幕不可见，反而增加 CSS 解析负担
渐变和 background-color 能共存吗？
能，但层级关系必须理清：background-image 永远叠在 background-color 上方；而 background 简写会重置全部背景属性。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：先写
background-color: #fff，再写background-image: linear-gradient(...) - 简写写法：把渐变放最前，
background: linear-gradient(...), #fff（注意逗号分隔，且#fff是 fallback 色） - 错误写法：
background: #fff; background: linear-gradient(...)→ 第二行覆盖第一行，#fff失效
background-size: 200% 200%：如果渐变存在，你会看到明显拉伸图案；如果还是透明，说明函数根本没通过解析。 
