CSS3 漸層背景色使用方法 相容IE9+

背景色，除了純色以外，還能夠使用多種顏色組合成為漸層背景色，使頁面豐富。

漸層背景分為兩種：

1、線性漸層；

2、環狀漸層；

 

線性漸層

線性漸層分為：橫向、縱向、對角漸層三種漸層

##語法：

 = linear-gradient([ [ | to  ] ,] ? [, ]+)

 = [left | right] || [top | bottom ]

 =  [  |   ]?

###：用角度值指定漸變的方向。

to left：設定漸層為從右到左；

to right：設定漸層為從左到右；

to top：設定漸層為從下到上；

#to bottom：設定漸層為從上往下；

#：設定指定漸層的起止顏色

：指定顏色

：以長度值指定起止色位置。不允許負值

：以百分比指定起止色位置。

 

background:linear-gradient(參數1，參數2，參數3，參數4....參數N)

參數1：可填可不填，填寫的話寫方向如：to right,就是漸變方向由左到右，不填寫預設從上到下漸變。

參數1'：基本上與參數1一致，寫在-webkit-,-moz-,-o-前綴情況下，如：left 代表漸變方向開始的位置

參數2 ：漸層開始顏色，可填上rgba()或#fff或white,後面加百分比代表顏色佔比多少，如#fff 50% 代表白色佔比50%。

參數3：若後面無參數 則為漸變終止顏色，與參數2屬性可選一致。

參數4....參數N:可增加的漸層顏色節點。最後一個為漸進式終止顏色

 

範例：

linear-gradient(#fff, #75aaa3);
 linear-gradient(to bottom, #fff,#75aaa3); 
linear-gradient(to top, #75aaa3, #fff); 
linear-gradient(180deg, #fff, #75aaa3); 
linear-gradient(to bottom, #fff 0%, #75aaa3 100%);

##### #######但是，也需要相容瀏覽器：######

//从下至上
#text.btt{
background: -webkit-linear-gradient(bottom,#fff, #75aaa2);
background: -o-linear-gradient(bottom,#fff, #75aaa2);
background: -moz-linear-gradient(bottom,#fff, #75aaa2);
background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法（必须放在最后） */
}

### ############

//带透明度
#text.opac{
background: -webkit-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: -o-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: -moz-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: linear-gradient(rgba(256,256,256,0), #75aaa2); /* 标准的语法（必须放在最后） */
}

################################################################################################################################################## ###

以上是CSS3 漸層背景色使用方法 相容IE9+的詳細內容。更多資訊請關注PHP中文網其他相關文章！