CSS滤镜实现各种文字效果

  • <html>
    <head>
    <title>蓄能器隔膜</title>
    <meta http-equiv=content-Type content="text/html;charset=gb2312">
    <style>
    .abc {  line-height: 22px}
    .t12 {
    font-family:微软雅黑;   
    font-size: 15px;
    font-weight: lighter;
    color: ##C3C1C1; 
    Filter: dropshadow(color=#ffffff,offx=1,offy=1);
     TEXT-ALIGN: center; 
     TEXT-DECORATION: none
    }
    </style>
    </head>
    <body bgcolor=#C3C1C1 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);">
    <center>
    <table>
      <tr>
     <td style="FILTER: glow(color:#308148,strength=5);color: #ffffff;font-size:18px;font-family:隶书">今夜你会不会来,你的爱还在不在?</TD>
      </tr>
    </table>
    <br><br>
    <span style="color:#09ff11;font: italic 900 16pt 隶书;width: 220;filter: shadow(color=red,direction=135);">自己动手 丰衣足食</span>
    <br><br>
    <table bgcolor=#aaaaaa style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><tr><td style="filter:dropshadow(offX=1,offY=1,color=#000000);color:#ffffff;font-size:18px;font-family:华文行楷">雅语独喃<b><font color='#22FF22'>知</font><font color='#FF2222'>往</font><font color='#001199'>观</font><font color='#00fffa'>来</font></b></td></tr></table>
    <br><br>
    <style type="text/css">.3dfont { FILTER: glow(color=lime,strength=0) shadow(color=lime,direction:135); WIDTH: 678;font-family:隶书;font-size:16px; } </style>
    <center>
    <table border="0" width="569"><tr><td width="100%" class="3dfont"><font color="#008040">身高不过1米68,腰圆腿粗像西瓜,头大嘴小鼻梁趴,一张大嘴缺门牙!</font></td></tr></table>
    <br><br>
    <table width="400" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#999999" bgcolor="#D1D2A4">
      <tr> 
     <td style="padding:15px;letter-spacing:3px; COLOR: #6b6c35; FILTER: dropshadow(color=#ffffcc,offx=1,offy=1);" >北国风光,千里冰封,万里雪飘。望长城内外,惟馀莽莽;大河上下,顿失滔滔。山舞银蛇,原驰蜡象,欲与天公试比高。须晴日,看红妆素裹,分外妖娆。</td>
      </tr>
    </table>
    <br><br>
    <table width="312" height="123" border="0" cellpadding="0" cellspacing="0">
      <tr>
     <td bgcolor="#ffdf03"><div style="filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, color=black);color:orange;width:100%;font-family:华文新魏;font-size:17px;">织梦好,蚂蚁好;蚂蚁好,织梦更好</div></td>
      </tr>
    </table>
    <br><br>
    <table width="234" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="filter:blur(add=1,direction=135,strength=7)">
      <tr>
     <th scope="row" style="font-family:华文行楷;font-size:18px;color:red;">我想让里面的字正常显示</th>
      </tr>
    </table>
    <br><br>
    <table>
      <tr>
        <td width="510"><div style="height:1;width:100%;font-family:impact;font-size:14pt;color:deeppink;display:block; 
       filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"><p align="center">看小蜜的身材怎么样?您是否已爱上了她! </div></td>
      </tr>
    </table>
    <table>
      <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">I just couldn't help it.</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">We'd better be off.</div></td>
      </tr>
      <tr> 
    </table>
    <br><br>
    <table>
      <tr> 
        <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=blue,direction=135,strength=6)" align="center"><font color="blue" size="7" face="华文新魏">/font></td>
      </tr>
      <tr> 
        <td style="FILTER: glow(color=#bb0909,strength=2) shadow(color=#22BB09,direction=135)" align="center"><font  color=#E1E4EC size=6 face="华文新魏"><b>让自己不至于在等待回贴的过程中血气上涌</b></font></td>
      </tr>
      <tr> 
        <td style="FILTER: glow(color=yellow,strength=4) mask(color=green) chroma(color=#B4BBCF)" align="center" height=54><font color=#fa2233 size=6 face="华文彩云"><b>一个神奇的测试</b></font></td>
      </tr>
    </table>
    <br><br>
    <style type="text/css">
    .a1 {
     font-size: 32px;
     color: red;
     filter: dropshadow(color=#fa00fd,offX=1,offY=1,positives=true);
     height: 20px;
    }
    </style>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center"><div class="a1">看书 看棋 看美人 赏花 赏月 赏秋香</div></td>
      </tr>
    </table>
    </center>
    </body>
    </html>
     CSS滤镜来修饰文字,实现各种漂亮的文字特效,CSS filter()确实是个不错的东西,用好了,会让你网页上的文字更加漂亮吸引人,本页上的CSS效果一共演示了dropshadow、glow、alpha、progid、progid:DXImageTransform.Microsoft.wave、progid:DXImageTransform.Microsoft.Shadow等多种效果,几乎包括了所有的CSS滤镜,比较不错哦。

相关推荐