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/