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

html-css016

最基本的几种CSS文字滤镜效果,第1张

<table border=1 style="border-style: solid border-width: 1font-size=12px" width="520">

  <tr>

    <td width="510">

    <span style="font-size:30ptdisplay:block

             text-align:centercolor:blue

             filter:glow(color=red,strength=10)height:1">一路阳光  </span></td>

  </tr>

  <tr>

    <td width="510">

    <span style="font-size:30ptdisplay:block 

             text-align:centercolor:darkblue 

             filter:blur(add=t,direction=135,strength=10)height:1">一路阳光</span></td>

  </tr>

  <tr>

    <td width="510">

<div style="color:redfont-size:25ptheight:1display: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:1width:100% 

   font-family:impactfont-size:30ptcolor:navydisplay:block 

   filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"> 

        <p align="center"> 一路阳光</div></td>

  </tr>

  <tr>

    <td width="510">

<div style="height:1width:100%

   font-family:impactfont-size:30ptcolor:navydisplay:block

   filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)"> 

        <p align="center"> 一路阳光</div></td>

  </tr>

  <tr>

    <td width="510">

<span style="font-size:30ptdisplay:block

             text-align:centercolor: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:30ptdisplay:block

             text-align:centercolor:darkblue

             filter:shadow(color=blue)height:1">一路阳光</span></td>

  </tr>

  <tr>

    <td width="510">

<div align="center" style="height:1font-size:30pt

 filter:dropshadow(color=maroon,positive=1)">一路阳光</div></td>

  </tr>

  <tr>

    <td width="510">

<div align="center" style="height:1font-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:1font-size:20ptfont-family:impactbackground-color:blue"> 

        <p align="center">SUNNY</div></td>

  </tr>

  <tr>

    <td width="510">

<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5)

 height:1font-family:impactfont-size:20ptbackground-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:absolutefont-size:30ptcolor=bluefilter:fliph">一路阳光</span></td>

  </tr>

  <tr>

    <td><span style="position:absoluteleft:200font-size:30ptcolor=bluefilter: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>

可以换 {font-family:"你指定的字体"}

但是如果别人没有装你所指定的字体的话,还是会以系统默认字体显示

所以,要是换成一些很特殊的字体的话就没有必要了

你是想改样式还是想学习css?

.wp-pagenavi a:hover{

padding:0px 8px/*定义内边距:上下为0px,左右为8px*/

margin:0 0 0 8px/*定义外边距:顺序为上、右、下、左*/

color:#444/*定义文字颜色*/

display:inline-block/*定义为行内块元素*/

border:solid 1px #fff/*定义边框为1px宽度,颜色为白色的实线*/

background:#fff/*定义背景色为白色*/

outline:solid 1px #e1e0e0/*定义外部虚框为1px宽度实线,颜色为#e1e0e0*/

text-decoration:none/*定义超链接无下划线*/

}/*定义超链接鼠标悬停时的样式*/

-------------------------------------------------------------------------------------------------------------

div.pp_default a.pp_arrow_previous,div.pp_default a.pp_arrow_next{

background:url(../images/default/sprite.html) -31px -3px no-repeat/*定义背景图片*/

height:20pxmargin:4px 0 0width:20px}

-----------------------------------------------------------------------------------------

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0

padding: 0

border: 0

font-size: 100%

font: inherit

vertical-align: baseline

}

footer, header, hgroup, menu, nav, section {

display: block

}

------------------------------------------------------------------------------------------------------

@font-face {

    font-family: 'ImpactRegular'

    src: url('../fonts/impact-webfont.eot')

    src: url('../fonts/impact-webfontd41d.eot?#iefix') format('embedded-opentype'),

         url('../fonts/impact-webfont.woff') format('woff'),

         url('../fonts/impact-webfont.ttf') format('truetype'),

         url('../fonts/impact-webfont.svg#ImpactRegular') format('svg')

    font-weight: normal

    font-style: normal/*自定义字体,系统不自带的字体,你又想用,就这样定义一下*/