如何理解css3中的線性漸變

css3中的線性漸變

線性漸變公式：

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

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

#此種寫法跟正規表示式類似：

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

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

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(漸層關鍵色結點)

###   公式： b10fb37415d019cfffa8c4d7366c607f [ 42c97a047d75abc12b9b351eb8562711 | d82af2074b26fcfe177e947839b5d381 ]#########

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

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

以上是如何理解css3中的線性漸變的詳細內容。更多資訊請關注PHP中文網其他相關文章！