CSS3 滤镜 webkit-filter详细介绍及使用方法


Posted in HTML / CSS onDecember 27, 2012

大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。

-webkit-filter 的用法
-webkit-filter 用法是标准的 CSS 写法,如:
复制代码
代码如下:

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有
blur 模糊
brightness 亮度
contrast 对比度
drop-shadow 阴影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 饱和度
hue-rotate 色相旋转

下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:

原图
CSS3 滤镜 webkit-filter详细介绍及使用方法

blur 模糊
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:blur(2px);

brightness 亮度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:brightness(25%);

contrast 对比度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: contrast(50%);

drop-shadow 阴影
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: opacity(50%);

grayscale 灰度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: grayscale(80%);

sepia 褐色
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: sepia(100%);

invert 反色
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: invert(100%);

hue-rotate 色相旋转
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:hue-rotate(180deg);

saturate 饱和度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: saturate(1000%);

HTML / CSS 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 #HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 #HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 #HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 #HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 #HTML / CSS
You might like
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python实现图片彩色转化为素描
2019/01/15 Python
python实现根据文件格式分类
2019/10/31 Python
Python读取实时数据流示例
2019/12/02 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
火车的故事教学反思
2014/02/11 职场文书
生日主持词
2014/03/20 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
庆七一宣传标语
2014/10/08 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python