CSS 背景渐变方向由 linear-gradient()首参控制，可用关键词（如 to right）或角度（如 90deg），角度以中心为原点顺时针计算：0deg 向上、90deg 向右、180deg 向下、270deg 向左；45deg 为左上到右下，-45deg 为右上到左下；颜色后可加位置值精确控制过渡。
CSS 背景渐变的方向主要通过 linear-gradient() 的第一个参数控制，这个参数可以是关键词方向（如 to right）或角度值（如 45deg），两者效果等价但写法不同，角度更精确、更易复用。
用角度值定义渐变方向
角度以元素中心为原点，按顺时针方向计算：0deg 指向上（即从下到上），90deg 指向右（从左到右），180deg 指向下（从上到下），270deg 指向左（从右到左）。注意：这和数学坐标系相反，但符合 CSS 标准。
- 水平向右渐变：用
90deg或to right，效果一致 - 垂直向下渐变：用
180deg或to bottom - 左上到右下对角线：用
45deg（不是 135deg） - 右上到左下对角线：用
-45deg或315deg
角度与关键词的对应关系
角度和方向关键词可互相转换，常见对照如下：
-
to top≡0deg -
to right≡90deg -
to bottom≡180deg -
to left≡270deg（或-90deg） -
to bottom right≡45deg -
to top right≡-45deg
颜色位置配合角度实现精细控制
仅靠角度决定方向还不够，有时需微调颜色过渡起止点。可在每个颜色后加位置值，让渐变更可控：
立即学习 “ 前端免费学习笔记（深入）”；
-
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)—— 标准斜向渐变 -
background: linear-gradient(135deg, #ff9a9e 20%, #fad0c4 80%)—— 中间留白 / 压缩过渡区 -
background: linear-gradient(135deg, #ff9a9e 0px, #fad0c4 50px)—— 用像素单位精确定位色停点
避免常见角度误区
初学者容易混淆角度含义，导致渐变“反向”或“偏斜”：
- 误以为
0deg是从上到下 → 实际是180deg - 写
to bottom right却用135deg→ 正确应为45deg（因为 0deg 向上，顺时针转 45°即指向右下） - 在动画中动态改角度时，用
0deg → 360deg不如用0deg → 1turn更语义清晰
