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

所属分类：网络编程 / CSS/HTML 阅读数： 951

收藏 0赞 0分享

下面做个例子吧，这都是最基本滤镜的应用，其实两种或几种不同滤镜的组合会获得意想不到的效果，遇到问题自己多动手试试就OK了，当然要特别注意颜色的搭配，有时候用色不好是看不出效果的，配合背景图片的应用也会有很好的效果的。

<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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

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

简单明了带你了解CSS Modules

新手学习css优先级

css进阶学习选择符

实现css文字垂直居中的8种方法

完美实现CSS垂直居中的11种方法

webpack高级配置与优化详解

5个HTML5的常用本地存储方式详解与介绍

CSS代码检查工具stylelint的使用方法详解

Zen Coding css,html缩写替换大观快速写出html,css

javascript代码规范小结

网络赚钱

站长故事

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

简单明了带你了解CSS Modules

新手学习css优先级

css进阶学习 选择符

实现css文字垂直居中的8种方法

完美实现CSS垂直居中的11种方法

webpack高级配置与优化详解

5个HTML5的常用本地存储方式详解与介绍

CSS代码检查工具stylelint的使用方法详解

Zen Coding css,html缩写替换大观 快速写出html,css

javascript代码规范小结

网络赚钱

站长故事

css进阶学习选择符

Zen Coding css,html缩写替换大观快速写出html,css