資源描述：
《html、css、javascript 21》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、第21章濾鏡特效的應(yīng)用21.1設(shè)置透明度——alpha21.2添加模糊效果——blur21.3設(shè)置水平/垂直翻轉(zhuǎn)——fliph/flipv21.4設(shè)置灰度——21.5設(shè)置反轉(zhuǎn)——21.6設(shè)置X射線效果——xray21.7設(shè)置波浪效果——wave21.8設(shè)置陰影——dropshadow21.9設(shè)置邊緣光暈效果——glow21.10設(shè)置遮罩——mask21.11設(shè)置漸變陰影——shadow21.12設(shè)定顏色透明——chroma21.13小實例——濾鏡的綜合應(yīng)用HTML/CSS/JavaSc
2、ript標準教程實例版（第4版）第21章濾鏡特效的應(yīng)用基本語法filter:濾鏡屬性（參數(shù)1，參數(shù)2，……）第21章濾鏡特效的應(yīng)用語法說明?filter是濾鏡屬性選擇符。?濾鏡屬性包含有好多種，本章主要介紹的如表21-1。?參數(shù)值就是屬性值，用來反映屬性效果的，具體各個濾鏡屬性的參數(shù)值將在后面詳細介紹。第21章濾鏡特效的應(yīng)用表21-1濾鏡屬性表21.1設(shè)置透明度——alpha基本語法filter:alpha(opacity=opacity，finishopacity=finishopacity，style=sty
3、le，startx=startx，starty=starty，finishx=finishx，finishy=finishy)21.1設(shè)置透明度——alpha語法說明——alpha屬性包含的參數(shù)說明21.1設(shè)置透明度——alpha實例代碼21.1設(shè)置透明度——alpha接上頁21.1設(shè)置透明度——alpha接上頁21.1設(shè)置透明度——alpha網(wǎng)頁效果21.1設(shè)置透明度——alpha提示在運行含有濾鏡屬性的代碼時，瀏覽器會出現(xiàn)一個信息欄提示您InternetExplorer阻止了一些不安全的內(nèi)容。這時您只要單擊信
4、息欄的“確定”按鈕，然后再右鍵單擊靠近瀏覽器頂端的信息，從快捷菜單選擇“允許阻止的內(nèi)容”即可看到濾鏡的效果。21.2添加模糊效果——blur基本語法filter：blur（add=add，direction=direction，strength=strength）21.2添加模糊效果——blur語法說明?blue屬性包含的參數(shù)說明見表21-3。?動態(tài)模糊的方向是以45°為一個單位，所以如果設(shè)置的方向度數(shù)不是45的倍數(shù)的話，瀏覽器就會以其最接近的45倍數(shù)來設(shè)置模糊度數(shù)。如，設(shè)置了direction=160，實際瀏覽
5、器是以180°來顯示模糊方向的。21.2添加模糊效果——blur表21-3blue濾鏡參數(shù)說明21.2添加模糊效果——blur實例代碼21.2添加模糊效果——blur接上頁21.2添加模糊效果——blur網(wǎng)頁效果21.3設(shè)置水平/垂直翻轉(zhuǎn)——fliph/flipv基本語法filter：fliphfilter：flipv21.3設(shè)置水平/垂直翻轉(zhuǎn)——fliph/flipv語法說明?fliph和flipv兩個屬性都沒有參數(shù)，可以直接引用。21.3設(shè)置水平/垂直翻轉(zhuǎn)——fliph/flipv實例代碼21.3設(shè)置水平/垂
6、直翻轉(zhuǎn)——fliph/flipv接上頁21.3設(shè)置水平/垂直翻轉(zhuǎn)——fliph/flipv網(wǎng)頁效果21.3設(shè)置水平/垂直翻轉(zhuǎn)——fliph/flipv提示在實際應(yīng)用過程中，水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)濾鏡屬性也可以同時使用。其語法為：filter：fliphflipv;兩個屬性中間用空格隔開，代表水平垂直翻轉(zhuǎn)。21.4設(shè)置灰度——基本語法filter：gray21.4設(shè)置灰度——實例代碼21.4設(shè)置灰度——接上頁21.4設(shè)置灰度——網(wǎng)頁效果21.5設(shè)置反轉(zhuǎn)——
7、基本語法filter：invert21.5設(shè)置反轉(zhuǎn)——實例代碼21.5設(shè)置反轉(zhuǎn)——接上頁21.6設(shè)置X射線效果——xray基本語法filter：xray21.6設(shè)置X射線效果——xray實例代碼21.6設(shè)置X射線效果——xray接上頁21.6設(shè)置X射線效果——xray網(wǎng)頁效果21.6設(shè)置X射線效果——xray實例代碼21.6設(shè)置X射線效果——xray接上頁21.6設(shè)置X射線效果——xray網(wǎng)頁效果21.7設(shè)置波浪效果——wave基本語法filter：wave（add=true（fa
8、lse），freq=頻率，lightstrength=光強，phase=偏移量，strength=強度）21.7設(shè)置波浪效果——wave語法說明——wave屬性包含的參數(shù)說明21.7設(shè)置波浪效果——wave實例代碼21.7設(shè)置波浪效果——wave接上頁21.7設(shè)置波浪效果——wave網(wǎng)頁效果21.8設(shè)置陰影——dropshadow基本語法filter：dropshadow
