0deg表示从左向右渐变，角度按逆时针旋转，可使用deg值或to方向关键词控制渐变方向，如45deg为左下到右上，to right为左到右，多颜色沿渐变线分布。
在CSS中使用linear-gradient时，通过设置角度可以精确控制颜色渐变的方向。默认情况下，渐变是从上到下（等同于180deg），但你可以通过调整角度来改变这个方向，实现从任意方向过渡的效果。
理解linear-gradient的角度值
在linear-gradient中，角度决定了渐变线的方向。这个角度是相对于容器的**水平轴**逆时针旋转的。例如：
- 0deg：从左向右渐变
- 90deg：从下向上（等同于to top）
- 180deg：从右向左
- 270deg：从上向下（默认方向）
你也可以使用关键词代替角度，比如 to right、to top left 等，这些更直观。
如何设置自定义角度
直接在linear-gradient函数中传入角度值即可：
立即学习“前端免费学习笔记（深入）”；
background: linear-gradient(45deg, red, blue);
这表示从左下角向右上角方向进行红蓝渐变。角度越大，渐变线越偏转，颜色过渡方向也随之改变。
常见写法对比：
-
linear-gradient(45deg, yellow, purple)—— 对角线方向渐变 -
linear-gradient(to right, white, black)—— 水平从左到右 -
linear-gradient(to bottom right, #fff, #000)—— 从左上到右下
实用技巧与注意事项
调整角度时注意以下几点，避免效果不符合预期：
- 角度为
0deg时是“正右”，不是“正上”——这是初学者常混淆的地方 - 使用关键词（如
to top）可提升代码可读性 - 多个颜色节点会沿着渐变线均匀分布，除非指定位置
- 不同浏览器对负角度处理一致，例如
-90deg等同于270deg
基本上就这些。掌握角度和方向的关系后，就能灵活设计出各种斜向、对角或垂直渐变背景。不复杂但容易忽略细节。
