104      阿裏雲  技術社區[雲棲]

漸變背景（background）效果

chrom and Safari瀏覽器：

webkit核心的瀏覽器，使用CSS3漸變方法（css-gradient）

-webkit-gradient是webkit引擎對漸變的實現參數，一共有五個：
第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）；
第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值可以用坐標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）；
第四個和第五個參數，分別是兩個color-stop函數，color-stop函數接受兩個參數，第一個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色；

Firefox瀏覽器：

Firefox3.6+以後版本改進了很多CSS，Firefox支持兩種類型的CSS漸變：線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)

線性漸變(Linear Gradients)

要創建一個線性漸變，您需要設置一個起點和一個漸變的方向（或角度），並定義起止顏色

徑向漸變(Radial Gradients)

為徑向漸變的語法非常類似於線性漸變

-moz-linear-gradient有三個參數：
第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。
第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。

萬惡的IE瀏覽器：

IE瀏覽器下漸變背景的使用需要使用IE的漸變濾鏡

上麵的濾鏡代碼主要有三個參數：
依次是：startcolorstr, endcolorstr, 以及gradientType，其中gradientType=1代表橫向漸變，gradientType=0代表縱向淅變；
startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結尾的色彩；

上麵代碼實現的是紅色至藍色的漸變，但是不含透明度變化，這是由於IE目前尚未支持opacity屬性以及RGBA顏色，要實現IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強大，這種強大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。例如下麵的使用：

各個參數的含義如下：
opacity表示透明度，默認的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個可選參數，如果想要設置漸變的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
style用來指定透明區域的形狀特征：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開始處的 X坐標。
starty 漸變透明效果開始處的 Y坐標。
finishx 漸變透明效果結束處的 X坐標。
finishy 漸變透明效果結束處的 Y坐標。

Opera瀏覽器：

Opera新版和Firfox原理用法一樣：

整理兼容性的漸變背景效果：

最後更新：2017-04-03 05:39:49

  上一篇： 機房收費係統之上機、下機

  下一篇： poj 2128 Highways