17370845950

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 更语义清晰