|
|
IE要用到DXImageTransform.Microsoft.Gradient濾鏡（最后那個(gè)Gradient的首字母大寫(xiě)小寫(xiě)無(wú)所謂）。
| 屬性 | 說(shuō)明 |
|---|---|
| enabled | 是否啟用濾鏡，默認(rèn)為true |
| gradientType | 是垂直漸變還是水平漸變，默認(rèn)是0(垂直漸變)，1為水平漸變 |
| startColorStr | 起始顏色，能接受一個(gè)8位hex顏色值，從#FF000000到#FFFFFFFF，默認(rèn)是藍(lán)色#FF0000F；或者使用red,green等顏色值F |
| endColorStr | 結(jié)束顏色，能接受一個(gè)8位hex顏色值，從#FF000000到#FFFFFFFF，默認(rèn)是黑色#FF000000 |
| startColor | 作用同startColorStr，接受一個(gè)0到4294967295整體顏色值，沒(méi)有默認(rèn)值 |
| endColor | 作用同endColorStr，接受一個(gè)0到4294967295整體顏色值，沒(méi)有默認(rèn)值 |
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
接著講述一下SVG線性漸變的實(shí)現(xiàn)，因?yàn)橄嚓P(guān)的CSS私有屬性都衍生于此。由于沒(méi)有什么空間支持上傳SVG，我只能動(dòng)態(tài)生成SVG了。對(duì)我來(lái)說(shuō)，能動(dòng)態(tài)實(shí)現(xiàn)最好不過(guò)了，起碼能減少請(qǐng)求數(shù)，少寫(xiě)許多大于號(hào)小于號(hào)……下面是靜態(tài)實(shí)現(xiàn)，至于怎樣加入html自己google吧。
linearGradient 有x1,x2,y1,y2等幾個(gè)屬性，可以幫助我們實(shí)現(xiàn)水平漸變或垂直漸變。我們大可以把x1,x2,y2,y2當(dāng)成顏色漸變體的兩個(gè)點(diǎn)的坐標(biāo)就是。
當(dāng)y1等于y2，x1不等于x2，實(shí)現(xiàn)水平漸變。
當(dāng)x1等于x2，y1不等于y2，實(shí)現(xiàn)垂直漸變。
當(dāng)y1不等于y2，x1不等于x2，實(shí)現(xiàn)角度漸變。
復(fù)制代碼 代碼如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800px" height="400px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Javascript線性漸變（水平） by 司徒正美</desc>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/>
<stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55" fill="url(#gradient)"/>
</svg>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
動(dòng)態(tài)實(shí)現(xiàn)，不過(guò)在火狐中啞火了，可見(jiàn)火狐在SVG上也怠工了。
復(fù)制代碼 代碼如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800px" height="400px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Javascript線性漸變（垂直） by 司徒正美</desc>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#008000" stop-opacity="1"/>
<stop offset="80%" stop-color="#a9ea00" stop-opacity="0"/>
</linearGradient>
</defs>
<polygon id = "s1" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/>
</svg>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
復(fù)制代碼 代碼如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800px" height="400px"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Javascript線性漸變(角度) by 司徒正美</desc>
<defs>
<linearGradient id="content" x1="0%" y1="0%" x2="100%" y2="100%">
<stop stop-color="black" offset="0%"/>
<stop stop-color="teal" offset="50%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</defs>
<rect x="10px" y="10px" width="350" height="350" fill="url(#content)"/>
</svg>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
接著說(shuō)說(shuō)-moz-linear-gradient，火狐的CSS私有屬性，隸屬于background-image，不過(guò)它也略寫(xiě)成background。語(yǔ)法為：
-moz-linear-gradient( <POINT>, <POINT> [, <STOP>]* )
我們可以設(shè)置這兩個(gè)點(diǎn)的值坪決定其是水平還是垂直，如
/*水平*/
-moz-linear-gradient(left, right [, <STOP>]* )1.
/*垂直*/
-moz-linear-gradient(top, bottom [, <STOP>]* )
至于后面的部分，看看下面的運(yùn)行框就足夠了。不過(guò)這要用最新版的firefox(3.6a1)才能見(jiàn)效果。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
接著下來(lái)看看-webkit-gradient這個(gè)CSS屬性，用法來(lái)-moz-linear-gradient差不多，但有三點(diǎn)不同。第一個(gè)參數(shù)用來(lái)決定是線性漸變與放射性漸變，這里寫(xiě)linear就可以了。兩個(gè)點(diǎn)值，一定要為left,right,top與bottom的兩個(gè)，而且怎樣組合也實(shí)現(xiàn)不了角度漸變。三是color-stop的偏移量一定為小數(shù)。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
結(jié)語(yǔ)，這就是多種瀏覽器共存的帶來(lái)的和諧局面，我寧愿IE實(shí)現(xiàn)完全壟斷了。下一部分才是征途的開(kāi)始，光IE處理濾鏡失效的問(wèn)題，就要?jiǎng)佑胻able這個(gè)上古神器了。SVG，在上面的運(yùn)框中，你們看到了，我還特意搞了一個(gè)小工具來(lái)創(chuàng)建這些特殊的對(duì)象……
JavaScript技術(shù)：javascript線性漸變一，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
