CSS线性渐变属性linear-gradient的语法格式如下:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

其中参数含义如下

描述
direction 用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。

以上参考自https://www.runoob.com/cssref/func-linear-gradient.html

最令人感到疑惑的就是第一个参数 direction 

有例子如下:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}
#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

其中第一个例子很容易理解,字面意义上的,从左至右渐变,从红色变为黄色。

那么问题来了,第二个函数中的180度角度代表什么方向呢?怎么判断呢?

原来啊,

当用direction 参数来指定渐变方向时,

正数值表示按顺时针方向的偏移角度,

而负数值是按逆时针方向的偏移角度值。

 

 

45度是时针指向1:30时的方向,90度是时针指向3:00时的方向,315度是时针指向10:30时的方向,0度/360度是时针指向12:00时的方向。

因此,direction 值为-45度和315度时所表示的激变方向指向是相同的。

以上参考自: http://www.atjiang.com/css-linear-gradient-degs/