web学习—css样式表—应用(二)

4、滤镜属性

     滤镜用法::style=“filter:filtername(fparamter1,。。。)”:::filtername:滤镜属性名;fparamter:滤镜参数。

1、Alpha属性:设置透明层次

      filter:Alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,

                              finishY=finishY)

     参数:opacity:代表透明度等级,值为0到100.
                 finishopacity(可选项):表示设置结束时的透明度。值为0到100.
                 style:指定了透明区域的形状特征。0(统一形状),1(线性),2(放射状),3(长方形)。
                 startX与startY:渐变透明效果的开始坐标。
                 finishX与finishY:渐变透明效果的结束坐标。

2、Blur属性:创建高速移动效果,即模糊效果(常用于文本)
      filter:blur(add=add,direction,strength=strength)
      参数:add:值为ture(默认)和false,图片是否被改变为模糊效果。模糊效果是按顺时针进行的。
                  direction:模糊的方向,0°为垂直向上,然后每45°为一个单位。默认为270°。
                  strength:指定多少个像素的宽度受模糊影响。
         
3、Chroma属性:设置专属颜色透明(常用于文本)
       filter:Chroma(Color=color)   
      参数:color:设置那种颜色透明。

4、DropShadow属性:添加对象阴影效果(常用于文本)
      filter:DropShadow(Color=color,Offx=Offx,Offy=Offy,Positive=positive)
      参数:Color:投射阴影的颜色
                  Offx,Offy:X方向,Y方向阴影的偏移量
                  Positive:true(对任何非透明像素建立可见投影),false(对任何透明像素建立可见投影)

5、FlipH属性:创建水平镜像图片

6、FlipV属性:创建垂直镜像图片

7、Glow属性:加光辉在附近对象的边沿外(常用于文本)
      filter:Glow(Color=color,Strength)
      参数:Color:指定光辉颜色
                  Strength:指定光辉阴影的范围。

8、Gray属性:把图片灰度化

9、Invert属性:反色

10、Shadow属性:创建偏移固定影子(常用于文本)
         filter:Shadow(Color=color,Direction=数值)
        参数:Color:阴影的颜色,RGB表示法
                    Direction:设定投影的方向,按顺时针方向,0°表示向上,以45°为一个单位。

11、Wave属性:波纹效果(常用于文本)
        filter:Wave(Add=数值,Freq=数值,LightStrength=数值,Phase=数值,Strength=数值)
       参数:Add:设置是否显示原对象,0(False)表示不显示,非0表示显示
                   Freq:设置波动的个数。
                   LightStrength:设置对波浪的光照强度,取值为0到100,数值越大光照越强
                   Phase:设置波浪的其实相角,取值从0到100的百分数值
                   Strength:代表波的振幅大小,取值为自然数。

12、Xray属性:使图片向被X光照射过一样



         对于滤镜 这里指整理了几个常用到的,便于用时查阅。其实对于我们不很注重与页面方面设计的,这方面只要了解就可了。    

         至此css的学习算是结束了。写的这些内容大部分出自梦之都的css教程部分,也有许多来自W3School。还有就是来自书籍的查阅。对于这些内容的注意点,在相应文章中都指出了,但是由于不是很重要的侧重于这方面的学习,有一部分的内容并没有亲自试验过对于其中的对错,还请有心人指正下,共同学习,谢了!


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值