最基本的几种 CSS 文字滤镜效果

闲来无事，整治少许css笔墨功效，给入门者。底下做个例子吧，这都是最基础滤镜的运用，本来两种或几种各别滤镜的拉拢会赢得预见不到的功效，遇到题目本人多发端试试就ok了，固然要更加提防脸色的搭配，有功夫用色不好是看不出功效的，共同后台图片的运用也会有很好的功效的。由于太懒，以是没有写解释也没有写什么语法方法，本人看看吧！ 嘿嘿。（看不领会别骂我呀） 1、功效图：一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光sunnysunny一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光一齐阳光2、代码行。<table border=1 style="border-style: solid; border-width: 1;font-size=12px" width="520">  <tr>    <td width="510">    <span style="font-size:30pt;display:block;             text-align:center;color:blue;             filter:glow(color=red,strength=10);height:1">一齐阳光  </span></td>  </tr>  <tr>    <td width="510">    <span style="font-size:30pt;display:block;              text-align:center;color:darkblue;              filter:blur(add=t,direction=135,strength=10);height:1">一齐阳光</span></td>  </tr>  <tr>    <td width="510"><div style="color:red;font-size:25pt;height:1;display:block; filter:progid:dximagetransform.microsoft.motionblur(strength=30,add=1,direction=135)">         <p align="center"> 一齐阳光</div></td>  </tr>  <tr>    <td width="510"><div style="height:1;width:100%;    font-family:impact;font-size:30pt;color:navy;display:block;    filter:progid:dximagetransform.microsoft.wave(strength=3)">         <p align="center"> 一齐阳光</div></td>  </tr>  <tr>    <td width="510"><div style="height:1;width:100%;   font-family:impact;font-size:30pt;color:navy;display:block;   filter:progid:dximagetransform.microsoft.wave(strength=3,freq=5)">         <p align="center"> 一齐阳光</div></td>  </tr>  <tr>    <td width="510"><span style="font-size:30pt;display:block;             text-align:center;color:darkblue;             filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);             height:1">一齐阳光</span></td>  </tr>  <tr>    <td width="510"><span style="font-size:30pt;display:block;             text-align:center;color:darkblue;             filter:shadow(color=blue);height:1">一齐阳光</span></td>  </tr>  <tr>    <td width="510"><div align="center" style="height:1;font-size:30pt; filter:dropshadow(color=maroon,positive=1);">一齐阳光</div></td>  </tr>  <tr>    <td width="510"><div align="center" style="height:1;font-size:30pt; filter:dropshadow(color=maroon,positive=0);">一齐阳光</div></td>  </tr>  <tr>    <td width="510"><div style="filter:progid:dximagetransform.microsoft.engrave(bias=0.5); height:1;font-size:20pt;font-family:impact;background-color:blue">         <p align="center">sunny</div></td>  </tr>  <tr>    <td width="510"><div style="filter:progid:dximagetransform.microsoft.emboss(bias=0.5); height:1;font-family:impact;font-size:20pt;background-color:blue">         <p align="center">sunny</div></td>  </tr>  <tr>     <td style="filter: mask(color=#e1e4ec)shadow(color=#8c96b5,direction=135)chroma(color=#e1e4ec)" align="center"><font color="blue" size="6"><b>一齐阳光</b></font></td>  </tr>  <tr>     <td style="filter: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>一齐阳光</b></font></td>  </tr>  <tr>     <td style="filter: mask(color=#e1e4ec)dropshadow(color=#b4bbcf,offx=-3,offy=-3,positive=1)chroma(color=#e1e4ec)" align="center"><font  color="blue" size="6"><b>一齐阳光</b></font></td>  </tr>  <tr>     <td style="filter: glow(color=#8c96b5,strength=2)shadow(color=#b4bbcf,direction=135)" align="center"><font  color=#e1e4ec size=6><b>一齐阳光</b></font></td>  </tr>  <tr>     <td style="filter: mask(color=#e1e4ec)shadow(color=#b4bbcf,direction=135)chroma(color=#e1e4ec)" align="center"><font  color=#8c96b5 size=6><b>一齐阳光</b></font></td>  </tr>  <tr>     <td style="filter: glow(strength=1)mask(color=#b4bbcf)chroma(color=#b4bbcf)" align="center" height=54><font color=#8c96b5 size=6><b>一齐阳光</b></font></td>  </tr>  <tr>    <td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">一齐阳光</span></td>  </tr>  <tr>    <td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">一齐阳光</span></td>  </tr></table><table align=center background="http://www.idc2008.com/468x60-8.gif" border=0>  <tr>     <td style="filter: glow(strength=4)mask(color=#e1e4ec)"><font size="7"> <b>一齐阳光</b></font></td>  </tr></table>