久久亚洲天堂,国产一二三在线,九九热九九

<!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(翻轉(zhuǎn))</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><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Alpha(style=2)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Blur(add=0,direction=90,strength=20)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Chroma(color=#08B218)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Dropshadow(color=#FF3300,offX=5,offY=5,positive=1)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:FlipV"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Glow(color=#33FF33,strength=10)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Gray"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Invert"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Mask(color=#0000FF)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:shadow(color=red,direction=135)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Wave(add=0,freq=3,strength=10,lightstrength=20,phase=50)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Xray"></td>     </tr> </table>  <strong>Alpha:</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>開始透明度(opacity):100結(jié)束透明度(finishopacity):0開始位置(startX,startY):(0,0)結(jié)束位置(finishX,finishY):(50,50)</td>         <td width=200>開始透明度(opacity):70結(jié)束透明度(finishopacity):20開始位置(startX,startY):(0,0)結(jié)束位置(finishX,finishY):(50,50)</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,finishY=50)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Alpha(style=1,opacity=70,finishopacity=20,startX=0,startY=0,finishX=50,finishY=50)")</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><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:blur(add=1,direction=270,strength=20)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:blur(add=0,direction=90,strength=20)"></td>     </tr> </table>  <strong>Chroma</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>Chroma指定的字體顏色(我是CCHXP)變?yōu)橥该?/td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Chroma(color=#08B218)"></td>     </tr> </table>  <strong>DropShadow</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>設(shè)置陰影顏色為淡綠色，往右移5px，往下移5px，且陰影呈不透明的效果。</td>         <td width=200>設(shè)置陰影顏色為粉紅色，往左移5px，往上移5px，且陰影呈不透明的效果。</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:DropShadow(color=lightgreen,offX=5px,offY=5px,positive=1)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:DropShadow(color=pink,offX=-5,offY=-5,positive=1)"></td>     </tr> </table>  <strong>FlipH&FlipV</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>設(shè)置圖片水平翻轉(zhuǎn)FlipH</td>         <td width=200>設(shè)置圖片垂直翻轉(zhuǎn)FlipV</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:FlipH"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:FlipV"></td>     </tr> </table>  <strong>Glow</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>設(shè)置圖片光暈顏色為黃色，強(qiáng)度為10</td>         <td width=200>設(shè)置圖片光暈顏色為紅色，強(qiáng)度為20</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Glow(color=yellow,strength=10)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Glow(color=pink,strength=20)"></td>     </tr> </table>  <strong>Gray</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>將圖片的顏色去除，以達(dá)到灰色效果</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Gray"></td>     </tr> </table>  <strong>Invert</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>設(shè)置圖片顏色呈底片效果</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Invert"></td>     </tr> </table>  <strong>Mask</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>設(shè)置圖片的屏蔽顏色為藍(lán)色</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Mask(color=#0000FF)"></td>     </tr> </table>  <strong>Shadow</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>設(shè)置圖片陰影顏色為綠色，往225度方向</td>         <td width=200>設(shè)置圖片陰影顏色為紅色，往135度方向</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Shadow(color=green)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Shadow(color=red)"></td>     </tr> </table>  <strong>Wave</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>不顯示原始圖片，有5個(gè)振幅為20象素的波浪，其光的強(qiáng)度為30，波浪其始位置為50</td>         <td width=200>顯示原始圖片，有3個(gè)振幅為50象素的波浪，其光的強(qiáng)度為50，波浪起始位置為100</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Wave(add=0,freq=5,strength=20,lightstrength=30,phase=50)"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)"></td>     </tr> </table>  <strong>Xray</strong>  <table>     <tr>         <td width=200>原始圖片</td>         <td width=200>X光照片的效果</td>     </tr>     <tr>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Xray"></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><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Gray"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Invert"></td>         <td><img src=/d/file/itjie/HTML-CSS/2014-10-27/6b0a6639d5639d880780ceca9e60806c.gif style="filter:Xray"></td>     </tr> </table>  </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

HTML/CSS技術(shù)：CSS濾鏡示范(filter)附源代碼(靜態(tài)濾鏡)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

中文字幕日韩一区二区_国产一区二区av_国产毛片av_久久久久国产一区_色婷婷电影_国产一区二区精品

CSS濾鏡示范(filter)附源代碼(靜態(tài)濾鏡)

相關(guān)文章閱讀