CSS濾鏡示範(filter)附原始碼(靜態濾鏡)_CSS/HTML
來源：互聯網
上載者：User
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>filter(css濾鏡)</title> <style type="text/css"> body { margin: 0px; padding: 0px; } table { font-size: 12px; border: 1px solid #0000FF; } tr,td { padding: 0px; border: 1px solid #0000FF; } </style> </head> <body> <strong>filter視覺濾鏡的種類</strong> <table> <tr> <td width=80>Alpha(透明度)</td> <td width=80>Blur(模糊)</td> <td width=80>Chroma(指定顏色透明)</td> <td width=80>DropShadow(不透明陰影)</td> <td width=80>FlipH&FlipV(翻轉)</td> <td width=80>Glow(邊緣光暈)</td> <td width=80>Gray(去色)</td> <td width=80>Invert(底片效果)</td> <td width=80>Mask(遮照效果)</td> <td width=80>filter:Shadow(影子)</td> <td width=80>Wave(波浪)</td> <td width=80>Xray(輪廓加亮)</td> </tr> <tr> <td height=140></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <strong>Alpha:</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>開始透明度(opacity):100結束透明度(finishopacity):0開始位置(startX,startY):(0,0)結束位置(finishX,finishY):(50,50)</td> <td width=200>開始透明度(opacity):70結束透明度(finishopacity):20開始位置(startX,startY):(0,0)結束位置(finishX,finishY):(50,50)</td> </tr> <tr> <td></td> <td></td> <td> </tr> </table> <strong>Blur:</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>顯示原來的圖片，且以270度的方向模糊20px</td> <td width=200>不顯示原來的圖片，且以90度方向模糊20px</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <strong>Chroma</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>Chroma指定的字型顏色(我是CCHXP)變為透明</td> </tr> <tr> <td></td> <td></td> </tr> </table> <strong>DropShadow</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>設定陰影顏色為淡綠色，往右移5px，往下移5px，且陰影呈不透明的效果。</td> <td width=200>設定陰影顏色為粉紅色，往左移5px，往上移5px，且陰影呈不透明的效果。</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <strong>FlipH&FlipV</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>設定圖片水平翻轉FlipH</td> <td width=200>設定圖片垂直翻轉FlipV</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <strong>Glow</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>設定圖片光暈顏色為黃色，強度為10</td> <td width=200>設定圖片光暈顏色為紅色，強度為20</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <strong>Gray</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>將圖片的顏色去除，以達到灰色效果</td> </tr> <tr> <td></td> <td></td> </tr> </table> <strong>Invert</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>設定圖片顏色呈底片效果</td> </tr> <tr> <td></td> <td></td> </tr> </table> <strong>Mask</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>設定圖片的屏蔽顏色為藍色</td> </tr> <tr> <td></td> <td></td> </tr> </table> <strong>Shadow</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>設定圖片陰影顏色為綠色，往225度方向</td> <td width=200>設定圖片陰影顏色為紅色，往135度方向</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <strong>Wave</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>不顯示原始圖片，有5個振幅為20象素的波浪，其光的強度為30，波浪其始位置為50</td> <td width=200>顯示原始圖片，有3個振幅為50象素的波浪，其光的強度為50，波浪起始位置為100</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <strong>Xray</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>X光照片的效果</td> </tr> <tr> <td></td> <td></td> </tr> </table> <strong>Gray&Invert&Xray比較</strong> <table> <tr> <td width=200>原始圖片</td> <td width=200>Gray效果</td> <td width=200>Invert效果</td> <td width=200>Xray效果</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
