-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。一起学习一下filter这个属性吧。

现在规范中支持的效果有:

  1. grayscale 灰度               值为0-1之间的小数
  2. sepia 褐色         值为0-1之间的小数
  3. saturate 饱和度     值为num
  4. hue-rotate 色相旋转  值为angle
  5. invert 反色        值为0-1之间的小数
  6. opacity 透明度     值为0-1之间的小数
  7. brightness 亮度     值为0-1之间的小数
  8. contrast 对比度     值为num
  9. blur 模糊           值为length
  10. drop-shadow 阴影

用法是标准的CSS写法,如:

-webkit-filter: blur(2px);
无效果   -webkit-filter:none;
模糊   -webkit-filter:blur(3px)  
灰度 -webkit-filter:grayscale(0.5) 
亮度  -webkit-filter:brightness(0.5)
对比度   -webkit-filter:contrast(2.6)
饱和度   -webkit-filter:saturate(7.9)
色相旋转 -webkit-filter:hue-rotate(260deg)
反色   -webkit-filter:invert(0.9)
阴影  -webkit-filter:drop-shadow(10px 10px 10px #000)

滤镜与CSS3效果的更多相关文章

  1. 使用IE滤镜实现css3中rgba让背景色透明的效果

    让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...

  2. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  3. 用IE滤镜实现多种常用的CSS3效果

    CSS3是当下非常火的一个话题之一,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫 ...

  4. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  5. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  6. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  7. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  8. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  9. 颗粒翻页(css3效果展示)

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

随机推荐

  1. IPC

    IPC,全名Inter Process Communication即进程间通讯,在同一台机器上的两个进程就用IPC,不能跨物理机器。IPC包括共享内存、队列、信号量等几种方式,由于IPC通讯效率之高, ...

  2. C++ 学习笔记(3) —— 內联函数

    内联函数的用处: 用空间换取时间,在调用时不用每次都写调用的汇编. 什么时候内联: 比较小的函数:只有两三行 在循环里循环调用的函数 什么时候不内联: 比较大的函数,2.30行的 递归的函数

  3. PHP中fopen,file_get_contents,curl函数的区别

    PHP中fopen,file_get_contents,curl函数的区别 1.fopen/file_get_contents每次请求都做DNS查询,并不对DNS的信息进行缓存,而curl会对DNS的 ...

  4. 设置程序集(dll)引用路径,整洁美观

    static class Program { //设置引用程序集路径 static Program() { AppDomain.CurrentDomain.SetData("PRIVATE_ ...

  5. [转]网络诊断工具:MTR

    MTR是Linux平台上一款非常好用的网络诊断工具,集成了traceroute.ping.nslookup的功能,用于诊断网络状态非常有用.能按要求对路由中所有节点进行批量测试 第一列(Host):I ...

  6. json学习小记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  8. 一个平台BUG,好吧,找到了一个新的办法,同样的效果

    问题的来源,我是看到别人这么做,我只是看到了这个程序运行的视频,具体是当你选择通信方式时1  COM ,  2  网口:要求在combobox中选择,selectindex为0时显示COM的选项,为1 ...

  9. 探究platform_driver中的shutdown用途

    http://blog.csdn.net/moxiaomomo/article/details/7897943 "quiesce" 说的也不太明确,我的猜测是:比如系统中有一个大功 ...

  10. windows 中 使用MongoDB

    MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式. 传统的关系数据库一般由 ...