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

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

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

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

-webkit-filter: blur(2px);

css3 -webkit-filter的更多相关文章

  1. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  2. 学习笔记:CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  3. CSS3 滤镜Filter亮度动画

    CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...

  4. CSS3 之filter毛玻璃效果弹窗

    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  5. css3中filter的各种特效

    css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新 ...

  6. 关于css3 中filter的各种特效

    做项目时遇到了一个有趣的css特效. 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了. 现在规范中 ...

  7. 一个非常有意思的css3属性filter

    filter这属性貌似可以是img图片在黑白与彩色间转换 filter:grayscale(1)为黑白色,filter:grayscale(0)位彩色,可以用于hover效果 img:hover{fi ...

  8. css3整理--filter

    只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...

  9. CSS3滤镜filter浅析

    在实现特定显示效果的页面中,css的filter属性是一种强大的工具.它能让我们的页面更加地个性化并减少PS方面的工作.filter的属性值主要有以下十种: blur grayscale sepia ...

  10. css3滤镜Filter使用

    Filter主要用于图片,SVG等元素上,其默认值是none,有以下10个filter-function值可选: grayscale(灰度)效果类似于PS中的去色或者黑白 blur(模糊)效果类似于P ...

随机推荐

  1. c# ftp 上传文件 与 下载文件

    接着上一篇说. 上一篇说了根据配置文件获取路径,并判断路径在服务器中是否存在.如果不存在则在服务器中建立一个. 然后就是往路径下面传输文件了.. 代码: //连接ftp private void Co ...

  2. Mysql设置auto_increment_increment和auto_increment_offset

    查看与设置: show variables like '%auto_inc%'; show session variables like '%auto_inc%'; -- //session会话变量 ...

  3. win7 + eclipse + cocos2dx 开发环境配置

    最近想在win7上配置eclipse+cocos2dx开发环境,在安装之前一定要注意每项是32位还是64位,我选择的都是64位版本的,闲话少叙我们开始安装吧! 1.下载cocos2dx,我选择的是co ...

  4. js 获取ur参数 只要问号后面的那段传进url

    //获取url中的参数 function getUrlParam (pName, win) { var sUrl; if (typeof (win) == 'string') { sUrl = win ...

  5. maven配置logback

    [背景] 刚接触大数据项目,在生产环境中经常需要使用日志来判定一些问题的原因. 一直以来都在使用System.out.println的标准输出来往控制台上打印日志.这种方法对性能影响很大不说,查看日志 ...

  6. mongodb ---- findAndModify 写法

    db.coll.findAndModify({ query:{x:"ggg"}, update:{$set:{"x":"gggg"}}, f ...

  7. javascript总结29 :递归与回调函数

    1 递归函数 -递归的实质就是函数自己调用自己. -递归注意点:递归必须有跳出条件,否则是死循环. var i = 1; fn(); function fn(){alert("从前有座山,山 ...

  8. 编写高质量代码改善C#程序的157个建议——建议125:避免用FCL的类型名称命名自己的类型

    建议125:避免用FCL的类型名称命名自己的类型 试想过自己写一个Socket类型吗?如果没有,我们来尝试一下: public class Socket { //省略 } 把以上代码同某些其他工具类封 ...

  9. 修改TomCat端口实现多实例

      TomCat默认的端口是8080,还会占用8005,8009和8443端口.如果已经启动了tomcat,再启动一个tomcat会发现这些端口已经被占用了,这个时候就需要修改端口号.   以apac ...

  10. PopupWindow封装

    代码完全复制:https://github.com/pinguo-zhouwei/CustomPopwindow 使用参考:上面的github地址 1.封装类 /** * * 自定义PopWindow ...