[07/04][交流]CSS滤镜运用——BLUR（模糊）滤镜

happy-yan

假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。 　　先来看一下blur属性的表达式： 　　filter：blur（add=add，direction，strength=strength） 　　我们看到blur属性有三个参数：add、direction、strength。 　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 　　Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：
角度 方向 0 TOP (垂直向上) 45 TOP RIGHT (垂直向右) 90 RIGHT (向右) 135 BOTTOM RIGHT (向下偏右) 180 BOTTOM (向下) 225 BOTTOM LEFT (向下偏左) 270 LEFT (向左) 315 TOP LEFT (向上偏左)
看看两个不同的效果吧：
效果	代码
	<img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350 style="filter:blur(add=true direction=45 strengh=20)">
	<img src=http://rockyear.com/user/20065/140650_2006583135.jpg width=350 style="filter:blur(add=false direction=90 strengh=50)">
举一反三，应用到字体：
效果	代码
我喜欢音画学堂！	<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>

[ 本帖最后由 happy-yan 于 2006-7-5 09:43 编辑 ]

绯舞

CSS滤镜运用真是很妙

月儿

一 目 了 然 , 很詳 細 教 程呢 ~~