必须显式写 to bottom，因ie10不支持无方向简写，postcss等工具可能移除隐式默认，且 to bottom 明确表达沿高度轴向延伸的语义，确保渐变起点在顶、终点在底。
直接用 background-image: linear-gradient() 就能实现容器背景色随高度变化的渐变效果，但必须显式指定方向（比如 to bottom），不能依赖默认值——否则在部分旧浏览器或某些构建工具中会静默失效。
为什么“随高度渐变”必须写 to bottom 而不是省略方向
很多人以为 linear-gradient(red, blue) 默认就是从上到下，实际并非总是如此：IE10 只支持带 to 关键词的方向写法，不认无方向的简写；PostCSS 或某些 CSS-in-JS 工具在压缩时可能移除“隐式默认”，导致渐变完全不渲染。更关键的是，to bottom 明确表达了“沿容器高度轴向延伸”的语义，和你的需求完全对齐。
-
to bottom→ 渐变线垂直向下，起点在容器顶部，终点在底部，真正“随高度变化” -
to top→ 从下往上，视觉上像“倒挂”，容易误判 -
0deg在部分 iOS 版本中被解析为向上（符合规范），但和to bottom的直观性差一个认知层级 - 绝对角度如
180deg理论等价于to bottom，但可读性差，调试时多一层换算成本
颜色停靠点没设百分比，渐变会“拉稀”或“看不见中间色”
写成 linear-gradient(to bottom, #f00, #ff0, #00f) 看似简洁，其实浏览器会把三色平均分配：红占 0%–33%，黄占 33%–66%，蓝占 66%–100%。结果是黄色区域太窄，在小高度容器里几乎不可见；而如果容器很高，黄色又会显得突兀断层。
- 想让黄色在中段稳稳铺开，就写
#ff0 40%, #ff0 60%，形成“硬边过渡区” - 想让红→黄→蓝平滑过渡且比例可控，推荐
#f00 0%, #ff0 50%, #00f 100% - 避免
#f00 20%, #ff0 20%这种重合停靠点——它会产生锐利色带，在 Retina 屏上可能渲染出细噪点 - 百分比支持小数，但
49.99%和50%在视觉上无差别，纯属增加解析负担
background 简写会清空 linear-gradient，别混用
这是最常踩却最难排查的坑：你写了 background-color: #fff，再写 background-image: linear-gradient(...)，看起来没问题；但一旦换成 background: #fff 这种简写，整个 linear-gradient 就被彻底抹掉——因为 background 是复合属性，会重置所有子属性，包括之前设置的 background-image。
- 安全做法：只用
background-image+background-color分开声明，顺序无所谓（background-image总在上层） - 若坚持用简写，必须把渐变放最前面：
background: linear-gradient(...), #fff - 临时调试时加一句
background-size: 200% 200%，能立刻看出渐变是否加载成功——拉伸后若仍是一片纯色，说明根本没生效
真正难的不是写对语法，而是理解 linear-gradient 本质是个“图像”，它的坐标系绑定在容器盒模型上；所以当容器高度动态变化（比如由内容撑开、或响应式折叠），渐变会自动重绘——这点不用额外 JS，但前提是方向和停靠点写得足够健壮，不依赖固定像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
