CSS学习(七)——滤镜 (已废除)
2016-04-06 14:56
357 查看
Filter属性
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的height 或width 属性,或者设定position 属性为absolute,或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在img 对象上应用shadow 滤镜,可以在该对象img 对象的父容器上应用。
Alpha滤镜
属性名称 | 设定值 | 说明 |
opacity | 0-100 (100为默认值) | 对象的亮度 |
style | 1, 2, 3 | 滤镜的样式 |
例子2:div{background:pink;height:200px;alpha(style=3,opacity=70)}
Blur滤镜
属性名称 | 设定值 | 说明 |
add | true/false | 是否设为映像派 |
direction | 0-360 | 角度 |
strength | 数字 | 模糊度 |
Fliph、Flipv 滤镜
没有属性将图片镜像翻转:filter:fliph();
将图片垂直翻转:filter:flipv();
Dropshadow滤镜
属性名称 | 设定值 | 说明 |
color | 十六进制/英文 | 投影颜色 |
offx | 数字 | 投影横向偏离对象多少像素 |
offy | 数字 | 投影纵向偏离对象多少像素 |
positive | true/false | 是否建立透明 |
Glow滤镜
属性名称 | 设定值 | 说明 |
color | 十六进制/英文 | 发光颜色 |
strength | 数字 | 发光强度 |
Gray,Invert,Xray滤镜
没有属性。Gray灰度效果滤镜;
Invert照片反光效果滤镜;
Xray X射线效果滤镜;
Shadow滤镜
属性名称 | 设定值 | 说明 |
color | 十六进制/英文 | 阴影颜色 |
direction | 0-360 | 阴影方向 |
相关文章推荐
- IE9对CSS3属性的支持情况
- 基于谷歌官方DrawerLayout实现QQ样式边侧滑抽屉缩进缩出技术
- css content之counter-reset、content-increment
- 自定义input file样式
- css3 box-sizing属性
- CSS魔法堂:Absolute Positioning就这个样
- 起飞啦,css3云彩动画
- css3写出0.5px的边框
- 纯CSS3实现多层云彩变换飞行动画
- HTML,CSS编码规范
- 纯CSS实现图片抖动
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
- CSS选择器权重计算规则
- CSS摘要
- CSS3秘笈复习:第九章&第十章
- 自定义样式的checkBox
- 2.前端笔记之css
- css选择器总结
- tab切换(js+css)
- 富文本编辑器ckeditor的使用