[07/04][交流]CSS滤镜运用——BLUR（模糊）滤镜
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=2><font size=4 color=purple><b>
假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。<BR><BR>
先来看一下blur属性的表达式： <BR><BR>
filter：blur（add=add，direction，strength=strength）<BR><BR>
我们看到blur属性有三个参数：add、direction、strength。 <BR><BR>
Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。
Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：</b></font></td></tr>
<TR><TD align=center width=100% colspan=2><center>
<table border=1 bordercolor=gray width=50%>
<tr><td>角度</td><td>方向</td></tr>
<tr><td>0</td><td>TOP (垂直向上)</td></tr>
<tr><td>45</td><td>TOP RIGHT (垂直向右)</td></tr>
<tr><td>90</td><td>RIGHT (向右)</td></tr>
<tr><td>135</td><td>BOTTOM RIGHT (向下偏右)</td></tr>
<tr><td>180</td><td>BOTTOM (向下)</td></tr>
<tr><td>225</td><td>BOTTOM LEFT (向下偏左)</td></tr>
<tr><td>270</td><td>LEFT (向左)</td></tr>
<tr><td>315</td><td>TOP LEFT (向上偏左)</td></tr></table><center></td></tr>
<tr><td colspan=2><BR><BR><BR><font size=4 color=purple><b>看看两个不同的效果吧：</b></font>
<BR><BR>
<div algin=center><img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350></div></td></tr>
<tr><TD width=50%><center><font size=3>效果</center><td width=50%><center><font size=3>代码</center></td></tr>
<tr><TD width=50%><center><img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350 style="filter:blur(add=true direction=45 strengh=20)"></center></td><td width=50%><center><textarea rows=10 cols=54><img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350 style="filter:blur(add=true direction=45 strengh=20)"></textarea></center></td></tr>
<tr><TD width=50%><center><img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350 style="filter:blur(add=false direction=90 strengh=50)"></center></td><td width=50%><center><textarea rows=10 cols=54><img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350 style="filter:blur(add=false direction=90 strengh=50)"></textarea></center></td></tr>
<tr><td colspan=2><BR><BR><BR><font size=4 color=purple><b>举一反三，应用到字体：</b></font>
<BR><BR></td></tr>
<tr><TD width=50%><center><font size=3>效果</center><td width=50%><center><font size=3>代码</center></td></tr>
<tr><TD width=50%><center>
<font style="font-size:30PT; font-family:隶书;color=blue;font-weight:bold;filter:blur(add=true direction=45 strengh=40);width=100%;lineheight:200%;position:relative">我喜欢音画学堂！</font>
</center></td><td width=50%><center><textarea rows=10 cols=54>
<font style="font-size:30PT; font-family:隶书;color=blue;font-weight:bold;filter:blur(add=true direction=45 strengh=40);width=100%;lineheight:200%;position:relative">我喜欢音画学堂！</font></textarea></center></td></tr>
</table>
[ 本帖最后由 happy-yan 于 2006-7-5 09:43 编辑 ] CSS滤镜运用真是很妙 一 目 了 然 , 很詳 細 教 程呢 ~~
页:
[1]