最简写法为background: linear-gradient(red, blue)，方向默认to bottom；推荐用to bottom而非180deg以提升可读性；避免色停点过近导致硬边；多层渐变须用background-image并注意层叠顺序；真机环境测试亮度适应性至关重要。
直接用 linear-gradient()，方向参数可省略
默认就是从上到下，所以最简写法是：background: linear-gradient(red, blue);。浏览器会自动按 to bottom 解析，不需要显式写方向。老式写法里带前缀（如 -webkit-linear-gradient）现在基本不用了，现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）都原生支持标准语法。
to bottom 和 180deg 效果一样，但推荐用关键字
这两个写法等价：linear-gradient(to bottom, #fff, #000) 和 linear-gradient(180deg, #fff, #000)。但关键字更易读、不易写错角度值；而角度写法在做动画或动态计算时更灵活。注意：0deg 是从下到上（即 to top），不是默认方向，容易反着用。
颜色停靠点位置写错会导致“色块感”而非平滑过渡
常见错误是把百分比设得太近，比如：linear-gradient(to bottom, red 49%, red 50%, blue 50%, blue 51%)——这其实制造了硬边。真正平滑渐变应让相邻色停自然衔接：
- 第一个颜色不写位置，默认是
0% - 最后一个颜色不写位置，默认是
100% - 中间色停建议拉开间距，例如：
red 0%, orange 30%, yellow 70%, green 100%
多色渐变要小心透明色和层叠顺序
如果叠加多个 linear-gradient() 做复杂背景（比如带光效的按钮），记得用 background-image 而不是 background，避免被单色 fallback 覆盖：
立即学习“前端免费学习笔记（深入）”；
background-image: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent),
linear-gradient(to bottom, #3498db, #2980b9);
这里第二条会压在第一条下面；如果第一条用了不透明色，第二条就完全看不见了。调试时临时把某一层改成 red 或加 opacity: 0.5 很管用。
