先记住这个答案
linear-gradient 的角度以元素正上方为 0deg，顺时针旋转。0deg 表示渐变从底部到顶部，90deg 从左到右，180deg 从顶部到底部，270deg 从右到左。角度定义的是渐变线的方向——颜色沿着这条线过渡，起始颜色在渐变线的反方向，结束颜色在正方向。
0deg表示从下往上，不是从左往右- 角度顺时针旋转，和数学里的逆时针相反
- 方向关键字
to right等价于90deg - 非正方形元素上对角线渐变的角度不是 45deg
常见角度和方向关键字的对应
CSS 同时支持角度值和方向关键字两种写法，面试时经常考它们的对应关系。关键字写法的 to 表示渐变的终点方向，比如 to right 是往右渐变，对应 90deg。
.box-0 { background: linear-gradient(0deg, red, blue); }
/* 从下往上：底部红色 → 顶部蓝色，等价于 to top */
.box-90 { background: linear-gradient(90deg, red, blue); }
/* 从左往右：左边红色 → 右边蓝色，等价于 to right */
.box-180 { background: linear-gradient(180deg, red, blue); }
/* 从上往下：顶部红色 → 底部蓝色，等价于 to bottom */
.box-270 { background: linear-gradient(270deg, red, blue); }
/* 从右往左：右边红色 → 左边蓝色，等价于 to left */不写角度时默认是 180deg（to bottom），从上往下渐变。linear-gradient(red, blue) 和 linear-gradient(180deg, red, blue) 效果完全一样。
对角线渐变和非正方形的陷阱
写 to top right 或 to bottom left 这种对角线方向时，CSS 的规则和直觉有点不同。
to top right 并不等于 45deg。它的意思是渐变线的方向要保证右上角和左下角分别是纯结束色和纯起始色。在正方形元素上确实是 45 度，但在宽度是高度两倍的矩形上，角度大约是 63 度。
45deg 就是固定的 45 度，不管元素是什么形状。这意味着在长方形元素上，45deg 的渐变线不会刚好经过对角——它只是以中心为原点、从正上方顺时针转 45 度得到的方向。
这个区别在写 UI 时影响不大，但面试里问到「to top right 和 45deg 是不是一样」时就需要区分了。
负角度和超过 360 度的值
角度可以是负数。-90deg 等于 270deg，也就是从右往左。负数就是逆时针旋转。
超过 360 度的值会被等效处理：450deg 和 90deg 效果一样。浏览器不会报错，只是对 360 取模。
还有一个偶尔用到的单位是 turn。0.25turn 等于 90deg，0.5turn 等于 180deg。grad（梯度）也能用，100grad 等于 90deg，但项目里几乎没人用 grad。
容易答错的地方
- 以为
0deg是从左往右 - 很多人把 CSS 的角度和数学坐标系搞混了。数学里 0 度通常指向右边（x 轴正方向），逆时针增加。CSS 渐变的
0deg指向正上方，顺时针增加。这是最常见的混淆点。 - 以为
to top right和45deg完全等价 - 只有在正方形元素上它们效果才一样。在非正方形元素上，
to top right会自动调整角度让渐变线连接对角，而45deg永远是固定的 45 度。
面试官还会怎么问？
渐变线的长度是怎么算的？
渐变线会自动延长，直到它的垂直线能覆盖整个元素。在 0deg 和 180deg 时渐变线长度等于元素高度。在 90deg 和 270deg 时等于元素宽度。在其他角度时长度会大于宽和高中的任何一个。
repeating-linear-gradient 的角度规则和 linear-gradient 一样吗？
完全一样。repeating-linear-gradient 只是在渐变线上做了循环重复，角度、方向关键字的规则和 linear-gradient 没有区别。
怎么用 CSS 渐变画一条斜线？
用两个同色色标放在相邻的位置就行。比如 linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%) 可以画一条 45 度的黑色斜线。色标之间没有过渡距离就不会有渐变效果，变成硬边。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。