如何理解css3中的線性漸層

css3中的線性漸層

線性漸層公式：

background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop> [, <color-stop>]+ );

意為：(角度deg或者方位詞,一個或多個漸層顏色關鍵結點（多個的話用","隔開）);

此種寫法跟Regex類似：

[ ]：代表一個字元位，一般跟 “|” 連用，表示從[ ]中選擇一個；

|：表示“或”，意為從此符號左右兩邊選擇一個。

eg：[1|2]，即表示此位不是1就是2；

？：表示可有可無，取值範圍為[0,1]；

*：表示可有可無，取值範圍為(0,+∞)；

+：表示至少有一個，取值範圍為[1,+∞]；

此篇用Chrome瀏覽器預覽，故加上-webkit-首碼（以紅黃二色為例）

1.angle是漸層的角度，表示為xxdeg。

1）找到漸層圖形的中心點，以此為座標原點做座標系。

2）從0deg開始，逆時針旋轉形成的夾角角度為正，順時針旋轉形成的夾角角度為負。

3）漸層趨勢跟沿著旋轉一定角度後形成的射線方向相同。

xx=0 或 xx=360 時，漸層為水平從左向右；eg:background: -webkit-linear-gradient(0deg,red 0,yellow 200px);xx=90 時，漸層為垂直從下向上；eg:background: -webkit-linear-gradient(90deg,red 0,yellow 200px);xx=180 時，漸層為水平從右向左；eg:background: -webkit-linear-gradient(180deg,red 0,yellow 200px);xx=270 時，漸層為垂直從上向下；eg:background: -webkit-linear-gradient(270deg,red 0,yellow 200px);

圖例一：

0<xx<90 時，漸層從左下到右上。 eg:beg:ackground: -webkit-linear-gradient(45deg,red 0,yellow 200px);90<xx<180 時，漸層從右下到左上。eg:background: -webkit-linear-gradient(135deg,red 0,yellow 200px);180<xx<270 時，漸層從右上到左下。eg:background: -webkit-linear-gradient(225deg,red 0,yellow 200px);270<xx<360 時，漸層從左上到右下。eg:background: -webkit-linear-gradient(315deg,red 0,yellow 200px);

圖例二：

2.side-or-corner (邊或角)

　　可選值有 top（270deg或-90deg）、 bottom（90deg）、left （0deg）、right（180deg）、left top（315deg或-45deg）、left bottom（45deg）、right top（225deg或-135deg）、right bottom（135deg），用來表示 從上往下、從下往上、從左往右、從右往左、從左上往右下、從左下往右上、從右上往左下、從右下往左上等方位。

3.color-stop(漸層關鍵顏色結點)

公式：<color> [ <percentage> | <length> ]

意為：顏色值或代表顏色的英文單詞+空格+此漸層關鍵點所在位置在相應圖形中所佔的百分比或長度值（px）;

　註：此處一個顏色值<color>只能對應一個位置[ <percentage> | <length> ]（百分比是位置在兩個顏色關鍵結點連線的百分比，長度值是位置和原點的距離）。