灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:3708回复:0

CSS滤镜之blur属性

楼主#
更多 发布于:2011-10-03 10:08
假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
  先来看一下blur属性的表达式:   filter:blur(add=add,direction,strength=strength)   我们看到blur属性有三个参数:add、direction、strength。
  Add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。    Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上,每45度一个单位,默认值是向左的270度。角度方向的对应关系见下表:
  怎么样,是不是有些印象派的意思,这种效果的实现代码如下:   <html>
   <head>
   <title>filter blur</title>
   <style>//*CSS样式定义开始*//
   <!--
   div{width:200;
   filter:blur(add=true,direction=90,strength=25);}
   //*设置DIV样式,滤镜blur属性*//
    -->
   </style>
   </head>
   <body>
   <div style=“width:702; height: 288”>
   <p style=“font-family:lucida handwirting italic;
    font-size:72;font-style:bold;color:rgb(55,72,145);” >
    LEAF</p>
   //*定义字体名称、大小、样式、前景色*//
   </div>
   </body>
  </html>   我们看到strength设置为25,如果把其值再改大一些,就会达到非常夸张的效果,同时把Direction参数值为180,

喜欢0 评分0
游客

返回顶部