CSS如何使用渐变角度控制颜色变化_linear-gradient角度调整

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

基本上就这些。掌握角度和方向的关系后，就能灵活设计出各种斜向、对角或垂直渐变背景。不复杂但容易忽略细节。