-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. UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释(转)

    layoutSubviews总结 ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size- (void)sizeToFit—————— - (void ...

  2. 新手教程: 如何在新浪云计算SAE里部署代码

    感谢 sou6 的投递 时间:2011-11-22 来源:老夏博客 SAE自2011-7-10日起,全面支持SVN代码部署,用户不仅可以通过任何SVN客户端部署代码,而且SAE现有的代码部署方式也已经 ...

  3. Python学习笔记_读Excel去重

    读取一个Excel文件,按照某列关键字,如果有重复则去掉 这里不介绍所有的解决办法,只是列出一个办法. 软件环境: OS:Win10 64位 Python 3.7 测试路径:D:\Work\Pytho ...

  4. LINK : fatal error LNK1104: cannot open file "mfc42d.lib"

    VC++6.0上建立了个基于MFC应用程序,在编译时候没出现错误,但在LINK的是时候出现这样的错误:Linking...LINK : fatal error LNK1104: cannot open ...

  5. Spring查询方法的注入 为查询的方法注入某个实例

    //这里是客户端的代码 当调用CreatePersonDao这个抽象方法或者虚方法的时候由配置文件返回指定的实例 为查询的方法注入某个实例 start static void Main(string[ ...

  6. mysql:查询数据库版本的几种方式

    Mysql版本: 登入数据库的时候: select @@version; select version(); mysql> select @@version; +-----------+ | @ ...

  7. AJAX和DHTML

    DHTML: (动态的html)本身不是一门新语言,而是一门新技术,包含以下 html . css . dom . js AJAX  :  也是一门新技术包含    html . css.  dom ...

  8. PowerDesigner连接MySQL

    1.使用JDBC连接,地址:http://dev.mysql.com/downloads/connector/j/ 2.需安装Java(应该只要JRE):http://www.oracle.com/t ...

  9. https hsts 私密链接

    chrome强制转跳https,删除对某个域名的强制转跳即可 hrome的地址栏输入:chrome://net-internals/#hsts   在Delete domain下输入相对应的网址,不带 ...

  10. lnmp 多站点配置负载均衡

    1.虚拟机安装3个centos 2.三台服务器IP: 192.168.191.129(主)192.168.191.130192.168.191.131 3.分别在3台服务器的vhost目录下新建配置文 ...