用CSS濾鏡實現色彩坡形效果

如何用CSS實現色彩坡形效果,在Photoshop中實現色彩坡形的效果是通過漸層工具實現的,但是你知道嗎對於一般的色彩坡形CSS同樣可以完成。通過CSS完成色彩坡形可以減少網頁大小,而且可以很方便的改變漸層效果的顏色。

通過progid:DXImageTransform.Microsoft.Gradient濾鏡可以方便的實現漸層效果。

代碼大致如下

[CSS線上]-範例程式碼progid:DXImageTransform.Microsoft.Gradient(startColorStr=''lightblue'', endColorStr=''#FFFFFF'', gradientType=''1''); 文法

filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 屬性

enabled:可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。 true | false 
　　true: 預設值。濾鏡啟用。 
　　false:濾鏡被禁止。

startColorStr:可選項。字串(String)。設定或檢索色彩漸層的開始顏色和透明度。 
　　其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進位正整數。取值範圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值將被恢複為預設值。 
　　取值範圍為 #FF000000 - #FFFFFFFF 。預設值為 #FF0000FF 。不透明藍色。 
EndColorStr:可選項。字串(String)。設定或檢索色彩漸層的結束顏色和透明度。參閱 startColorStr 屬性。預設值為 #FF000000 。不透明黑色。 特性

Enabled:可讀寫。布爾值(Boolean)。參閱 enabled 屬性。 
GradientType:可讀寫。整數值(Integer)。設定或檢索色彩漸層的方向。1 | 0 
　　                1:預設值。水平漸層。 
　　                0:垂直漸層。 
StartColorStr:可讀寫。字串(String)。參閱 startColorStr 屬性。 
StartColor:可讀寫。整數值(Integer)。設定或檢索色彩漸層的開始顏色。 取值範圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。 
EndColorStr:可讀寫。字串(String)。設定或檢索色彩漸層的結束顏色和透明度。參閱 startColorStr 屬性。預設值為 #FF000000 。不透明黑色。 
EndColor:可讀寫。整數值(Integer)。設定或檢索色彩漸層的結束顏色。 取值範圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。當在指令碼中使用此特性時，也可以用十六進位格式： 0xAARRGGBB 。 說明

在對象的背景和內容之間顯示定製的色彩層。 
當此效果通過轉變顯示時，在漸層冊色彩層之上的文本程式性的初始化為透明的，當色彩漸層實現後，文本顏色會以其定義的值更新。