css3的background属性的linear-gradient函数

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/