CSS濾鏡實現各種文字效果

來源:互聯網
上載者:User
CSS濾鏡來修飾文字,實現各種漂亮的文字特效,CSS filter()確實是個不錯的東西,用好了,會讓你網頁上的文字更加漂亮吸引人,本頁上的CSS效果一共示範了dropshadow、glow、alpha、progid、progid:DXImageTransform.Microsoft.wave、progid:DXImageTransform.Microsoft.Shadow等多種效果,幾乎包括了所有的CSS濾鏡,比較不錯哦。

<html><head><title>css濾鏡實現各種文字效果</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>
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.