CSS线性渐变方向参数易出错的核心是to关键字与角度值方向相反：to top等价180deg（从下往上），to right等价90deg（从左往右）；多色停靠点须显式声明位置，背景尺寸与定位需配合控制显示区域，兼容性上优先用to关键字并避开0deg/180deg等敏感值。
linear-gradient方向参数到底怎么写才不翻车
方向写错是渐变背景最常白忙活的原因——看着语法全对，页面就是不按你想的渐变。核心就一条：CSS里to top和0deg是反向的，别凭直觉硬套数学坐标系。
-
to top表示颜色从下往上过渡（起点在底部），等价于180deg -
to right是从左往右，等价于90deg；to bottom right是从左上往右下，不是“指向右下角” - 用角度时，
0deg是从下往上（和to top一致），90deg是从左往右——这点和 SVG 或 canvas 完全相反 - 别混用：写了
to top就别再加角度值，浏览器会忽略角度
多色停靠点必须显式声明位置，否则容易糊成一片
只写linear-gradient(red, yellow, green)看起来能跑，但实际三色会按 0%–50%–100% 均匀分布，中间过渡太宽、边界模糊。真要控制节奏，每个色标都得带位置。
- 位置可以是百分比：
red 0%, yellow 30%, green 75%, blue 100% - 也可以是长度值：
red 0px, yellow 20px, green 45px（相对渐变线长度计算） - 漏掉首尾位置（如只写
yellow 30%）会导致浏览器自动补 0% 和 100%，但中间断层不可控 - 两个相同颜色紧挨着（如
#fff 49%, #fff 50%）能做出硬边效果，比用 box-shadow 更轻量
渐变当背景图用时，background-size和background-position很关键
默认渐变会铺满整个元素，但多数设计需要局部覆盖、重复或对齐某个角落——这时候光调linear-gradient本身没用，得靠背景层控制。
-
background-size: 200% 200%配合background-position: left top可让渐变只占左上角四分之一 - 想做「从按钮左侧滑入」的悬停效果？得用
background-size: 200% 100%+background-position: 100% 0，hover 时切到0% 0 - 多个渐变叠加时（比如一层主色+一层噪点纹理），每层都要单独设
background-size和background-position，顺序写在background简写里会覆盖
兼容性坑：老安卓 WebView 和 Safari 旧版对角度单位支持不一
不是所有环境都认deg——部分 Android 4.x WebView 把90deg当无效值回退成默认方向，Safari 6.1 之前不支持to关键字。线上出问题，八成卡在这儿。
- 稳妥写法优先用
to关键字：linear-gradient(to right, #f00, #00f)（iOS 6+ / Android 4.4+ 全支持） - 必须用角度时，避开
0deg和180deg这类易被误判的值，改用0.1deg或179.9deg - 需要透明过渡时，别依赖
rgba(0,0,0,0)，老 Safari 会当全黑处理，改用transparent关键字 - 用 Autoprefixer 时确认已开启
legacy模式，它不会自动加-webkit-linear-gradient前缀了
渐变看着简单，但方向、停靠点、背景层、兼容性这四块只要漏盯一块，就可能花二十分钟调一个像素级偏差。最麻烦的是它不报错，只是默默画错——所以每次改完，务必在真机 Safari 和微信内置浏览器里点开看一眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
