<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > <ptml> <pead> <meta http-equiv= "Content -type "content=" text/html; charset=gb2312 "> <title>filter (CSS Filter) </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> <script language= "JavaScript" > </script> </pead> <body> <strong> Type of filter Vision filter </strong> <div> <table> <tr> <td width=80>alpha (transparency) </td> <TD Width=80>blur (Fuzzy) </td> <td width=80>chroma (specify color transparent) </td> <TD wid Th=80>dropshadow (Opacity Shadow) </td> <td WIDTH=80>FLIPH&FLIPV (flip) </td> <TD width=80& Gt Glow (Edge Halo) </td> <td width=80>gray (go color) </td> <tD Width=80>invert (negative effect) </td> <td Width=80>mask (Matte effect) </td> <TD Width=80>filter : Shadow (Shadow) </td> <td width=80>wave (Wave) </td> <td Width=80>xray (outline highlighting) </td> </tr> <tr> <td height=140></td> <td></td> <TD&G t;</td> <td></td> <td></td> <td></td> <td ></td> <td></td> <td></td> <td></td> < td></td> <td></td> </tr> </table> </div> <strong>Alpha:< /strong> <div> <table> <tr> <td width=200> original picture </td> <td width =200> start Transparency (opacity): 100 End Transparency (finishopacity): 0 Start position (startx,starty):(0,0) End position (finishx,finishy):(50,50) </td> <td width=200>Start Transparency (opacity): 70 End Transparency (finishopacity): 20 start position (startx,starty):(0,0) End position (finishx,finishy):(50,50) </td> </ tr> <tr> <td></td> <td></td> <td> </tr> </table> </div> <strong>Blur:</strong> <div> <table> <tr> &L T;TD width=200> Original picture </td> <td width=200> Display original picture, and Blur 20px</td> <td in 270 degree direction width=20 0> does not show the original picture, and in 90-degree direction blur 20px</td> </tr> <tr> <td></td> <td> </td> <td></td> </tr> </table> </div> <strong>chroma</stron g> <div> <table> <tr> <td width=200> original picture </td> <td WIDTH=200&G T Chroma the specified font color (I am CCHXP) into transparent </td> </tr> <tr> <td></td> <td>& Lt;/td> </TR> </table> </div> <strong>DropShadow</strong> <div> <table> <tr> <TD width=200> Original picture </td> <TD width=200> Set the shadow color to light green, move to the right 5px, move down 5px, and the shadow is opaque. </td> <TD width=200> Sets the shadow color to pink, moves to the left 5px, moves up 5px, and the shadow is opaque. </td> </tr> <tr> <td></td> <td></td> <td ></td> </tr> </table> </div> <strong>FlipH&FlipV</strong> <div> <table> <tr> <td width=200> original picture </td> <td width=200> setting picture horizontal Flip Fliph< ;/td> <td width=200> Set Picture vertical flip flipv</td> </tr> <tr> <td></td > <td></td> <td></td> </tr> </table> </div> <st rong>glow</strong> <div> <table> <tr>TD width=200> Original picture </td> <td width=200> set picture halo color to yellow, strength to 10</td> <td width=200> settings Picture Halo color is red, intensity is 20</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </div> <strong>Gray</strong> <div& Gt <table> <tr> <td width=200> original picture </td> <td width=200> Remove the color of the picture to achieve the gray effect &L t;/td> </tr> <tr> <td></td> <td></td> </tr> </table> </div> <strong>Invert</strong> <div> <table> <tr> &L T;TD width=200> Original picture </td> <td width=200> Set Picture color negative effect </td> </tr> <tr> <td></td> <td></td> </tr> </table> </div> <strong>m Ask</strong> <div> <table> <tr> <td width=200> original picture </td> <td width=200> setup Picture The shielding color is blue </td> </tr> <tr> <td></td> <td></td> &L t;/tr> </table> </div> <strong>Shadow</strong> <div> <table> <tr> <TD width=200> Original picture </td> <td width=200> Set picture shadow color to green, to 225 degree direction </td> <TD WI dth=200> Set picture shadow color to red, to 135 degrees </td> </tr> <tr> <td></td> <td& gt;</td> <td></td> </tr> </table> </div> <strong>wave</stron g> <div> <table> <tr> <td width=200> original picture </td> <td WIDTH=200&G t; do not display the original picture, there are 5 amplitude of 20 pixels of the wave, its intensity is 30, the wave its beginning position is 50</td> <td width=200> display the original picture, there are 3 amplitude of 50 pixels of the wave, its light intensity is 50, the wave starting position is 1 00</td> </tr> <tr> <td></td> <td></td> <td></td> &L t;/tr> </table> </div> <strong>Xray</strong> <div> <table> <tr> <TD width=200> Original picture </td> <td width=200>x photo effect </td> </tr> <tr> <td></td> <td></td> </tr> </table> </div> <strong& Gt Gray&invert&xray comparison </strong> <div> <table> <tr> <td width=200> original picture ;/td> <td Width=200>gray effect </td> <td Width=200>invert effect </td> <td W Idth=200>xray effect </td> </tr> <tr> <td></td> <TD></TD&G T <td></td> <td></td> </tr> </table> </div> </body> </ Html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
