DIVCSS 第七章 CSS 各种滤镜

[复制链接]
ARCHY明星会员实名认证 发表于 2012-9-27 23:26:46 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
CSS的滤镜Filter 属性使用越来越广泛,今天介绍下Alpha 滤镜的使用、Blur 滤镜的使用、Filph、Filpv 滤镜、DropShadow 滤镜、Glow 滤镜、Gray ,Invert,Xray 滤镜、Shadow 滤镜。更多滤镜样式请下载样式表滤镜中文手册chm

1、Filter 属性介绍

设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的height 或width 属性,或者设定position 属性为absolute,或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在img 对象上应用shadow 滤镜,可以在该对象img 对象的父容器上应用。滤镜的机制是可扩展的。通过利用Microsoft® DirectX® Media SDK,你可以使用C++开发和使用第三方滤镜。该属性在MAC 平台上不可用。对应的脚本特性为filter。

2、Alpha 滤镜的使用
属性 说明
opacity 0-100 对象的亮度
style 1,2,3 滤镜的样式


3、Blur 滤镜的使用
属性 说明
addtrue/false 是否印象派
direction 0-360 角度
strength数字 模糊度


4、Fliph、Flipv 滤镜

属性 值 说明


5、DropShadow 滤镜
属性 说明
color 颜色 阴影颜色
offx 数字 x坐标偏移
offy 数字y 坐标偏移
positive true/false 是否建立透明


6、Glow 滤镜
属性 说明
color 颜色发光颜色
strength数字 发光厚度


7、Gray ,Invert,Xray 滤镜

属性 值 说明


8、Shadow 滤镜
属性 说明
color 颜色 阴影颜色
direction 0-360 阴影方向


之前分享过一篇Filter 在CSS用的滤镜效果使用方法也可以辅助学习,还有之前写discuz使用滤镜css中FILTER:progid:DXImageTransform.Microsoft.Gradient使用方法

总之还是老样子,学习一定要去用才可以真正领悟其中的使用技巧,积累多的使用经验。




上一篇:各种不同形式的论坛用户等级头衔
下一篇:新浪微博discuz插件(全新v2接口兼容X2和X2.5)

大神点评9

LAP 发表于 2012-9-28 00:11:33 [DIVCSS] 显示全部楼层
支持一下.  其实这些滤镜的效果还是非常不错的.  学习了
http://www.col0r.net  帮助QQ:786893337  能提供网站建设. 美工. 模版制作等服务   .有偿服务
我是小鸟 发表于 2012-9-29 09:59:25 [DIVCSS] 显示全部楼层
帮顶  
大爱无疆 发表于 2012-9-29 09:59:25 [DIVCSS] 显示全部楼层
哥最近喜欢上了顶贴,因为,如果帖子火了,那有哥的功劳。因为是哥搞沉的~~大家切记~不要迷恋哥~哥只是一个传说  
jingjinxin 发表于 2012-12-15 10:39:17 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
邦妮儿 发表于 2015-9-19 17:12:52 [DIVCSS] 显示全部楼层
工场是互联网教育践行者,针对互联网企业岗位提供在线直播,视频教程和多种形式的教学服务,帮助学习者快速进入互联网行业,并不断引进国内外先进的在线教育理念和技术,努力打造国内在线学习平台第一品牌
豪你个头 发表于 2015-9-22 16:23:07 [DIVCSS] 显示全部楼层
谢谢分享
青岛青菜 发表于 2016-11-12 10:20:17 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。谢谢分享!!!
http://jbk.dcpfb.com
不一样的时光 发表于 2017-11-20 08:48:14 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享




购买靓号就到九五靓号网众多靓号任您挑选www.95lhw.com
淘小淘 发表于 2018-7-10 14:22:36 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表