linear-gradient() 的参数顺序不可颠倒，首参为方向值（如 to bottom 或 90deg），决定渐变轴线走向，后续颜色沿此轴分布；省略方向易致兼容问题，角度单位仅支持 deg/rad/grad/turn，位置值须带合法单位，透明度应直接用 rgba() 或 transparent，且需手动添加 ie10 及旧 android 的 fallback。
linear-gradient() 的参数顺序不能颠倒
很多人写 linear-gradient(red, blue) 能生效，就以为方向永远是“从上到下”，其实这是默认行为，不是固定规则。真正起作用的是第一个参数——方向值，它决定了渐变轴线走向，后面的颜色列表只是沿这条线铺开。
常见错误现象：linear-gradient(#fff, #000) 在某些旧版 Safari 里显示为纯白，因为没声明方向，而该浏览器对无方向语法的解析不一致；更隐蔽的问题是，用 linear-gradient(90deg, red, blue) 和 linear-gradient(to right, red, blue) 看似等价，但前者是角度值（以 x 轴正向为 0°），后者是关键词，两者在极小角度（比如 1deg vs to right）时渲染可能有像素级偏差。
- 方向必须显式写，哪怕你想要“默认垂直”：用
to bottom比省略更稳妥 - 角度单位只支持
deg、rad、grad、turn，不支持px或无单位数字 -
to top等价于180deg，to right是90deg，别凭直觉猜反了
颜色停止点位置必须用合法单位或关键字
渐变里的每个颜色可以带位置，比如 red 20% 或 blue 100px，但这个位置不是“离容器左边多远”，而是沿渐变轴线的距离。如果轴线是斜的，100px 就是斜向上的 100px，不是水平距离。
使用场景：做条纹背景时常用重复定位，比如 linear-gradient(45deg, #000 25%, transparent 25%) 配合 background-size: 20px 20px；但如果写成 #000 25（漏掉 %），Chrome 会忽略整条声明，Firefox 可能报警告但继续渲染——这种不一致最容易在联调时漏掉。
立即学习“前端免费学习笔记（深入）”；
- 位置值可以是
%、px、em等绝对/相对单位，也可以是from、to、center - 多个颜色停点不能重叠（如
red 10%, blue 10%），否则中间过渡会异常，部分浏览器直接截断后续颜色 - 首尾停点不写位置时，默认为
0%和100%，但中间颜色没写位置，浏览器会自动均分，这点常被误认为“智能计算”，其实是规范强制行为
透明度必须用 rgba() 或 transparent，别用 opacity
linear-gradient(rgba(0,0,0,0.5), rgba(255,255,255,0)) 是合法的，但 linear-gradient(black, white) 加一层 opacity: 0.5 到父元素上，效果完全不同：前者是颜色通道逐像素混合，后者是整个渐变层整体变淡，阴影、文字叠加时表现差异极大。
性能影响：用 transparent 替代低 alpha 的 rgba 颜色（比如 rgba(0,0,0,0.01)）可减少合成层计算量，尤其在滚动区域里更流畅；但注意 transparent 本质是 rgba(0,0,0,0)，不能指定色相，所以想实现“半透蓝色底+透明顶”就得老实用 rgba(0,128,255,0.7), rgba(0,128,255,0)。
- 不要混用
transparent和rgba()做相邻停点，比如red, transparent, blue，中间会多出一段纯透明过渡，不是“红→蓝”的自然衰减 - CSS 预处理器（如 Sass）里如果变量存的是
transparent，拼进linear-gradient()时要确保没被转成字符串字面量，否则运行时报错
IE 和旧 Android WebView 的 fallback 必须手动加
linear-gradient() 在 IE10+ 和 Android 4.4+ 才原生支持，但 IE10 只认 -ms-linear-gradient()，而且方向关键词不支持 to xxx 写法，只能用角度或 left/top 这类旧关键词。更麻烦的是，Android 4.0–4.3 的 WebView 把 linear-gradient(red, blue) 当无效声明，连 fallback 颜色都不渲染。
容易踩的坑：只写现代语法，靠 Autoprefixer 补前缀——它不会帮你加 IE 专用语法，也不会插回退色块；还有人用 background: #000; background: linear-gradient(...);，指望老浏览器吃第一行，但实际中若 CSS 文件被压缩或顺序调整，极易失效。
- 最简 fallback：在
linear-gradient()前加一行纯色声明，如background: #333; background: linear-gradient(...); - 兼容 IE10：补
background: -ms-linear-gradient(top, #000, #fff);，注意它不支持to bottom，只能用top、bottom、left、right - 别依赖 Can I Use 上的“partial support”描述，Android 4.3 对
background-size+ 渐变组合的支持是残缺的，实测需降级为图片
渐变本身没有“复杂逻辑”，但方向、位置、透明度、兼容这四块全是隐性耦合点——改一个参数，往往要同步检查其他三处是否还成立。
