-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. linux常用的一些命令行操作（ubuntu）

    软件安装 sudo apt-get install xxx 压缩和解压缩 1. *.tar 用 tar –xvf 解压 2. *.gz 用 gzip -d或者gunzip 解压 3. *.tar.gz ...

  2. requests对象

    属性 0.HttpRequest.scheme 表示请求方案的字符串(通常为http或https) 1.HttpRequest.body 一个字符串,代表请求报文的主体.在处理非 HTTP 形式的报文 ...

  3. hdu 1686 KMP算法

    题意: 求子串w在T中出现的次数. kmp算法详解:http://www.cnblogs.com/XDJjy/p/3871045.html #include <iostream> #inc ...

  4. Perl 学习笔记－子程序

    1.定义子程序 使用sub关键字定义 ;   子程序名和标识符同要求, 但是有的特殊的可以用 &符号;  子程序是全局的, 不需要再使用前声明;  重名函数后者覆盖前者. sub roger{ ...

  5. .NET开源MSSQL、Redis监控产品Opserver之安全配置

    简介 Opserver是Stack Overflow的开源监控解决方案,由Stack Exchange发布,基于.NET框架构建.开源地址:https://github.com/opserver/Op ...

  6. 访问SAP的RFC

    .NET 环境Xp(sp3) vs2010, win2003 EN 32bit(sp2)winform,webform 引用sapnco.dll,sapnco_utils.dll(自动引用)配置文件需 ...

  7. [GO]结构体指针变量初始化

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  8. mysql:unknown variable 'default -collation=utf8_general_ci'

    无法登陆,因为在配置文档中设置了默认编码方式 将它注释掉,问题就解决了 在utf8_bin中你就找不到 txt = 'A' 的那一行, 而 utf8_general_ci 则可以.utf8_gener ...

  9. OpenNI depth深度数据的数据格式

    图像如何打开 如何查看它的数据格式并一个个读取 试一下ENVI等 可见,灰度图的Data只有一个值[0],而彩色图的Data却有三个值[142,119,113]. 这是用ENVI的Cursor Val ...

  10. C# Timer 用法

    System.Timers.Timer,通过.NET  Thread  Pool实现的,轻量,计时精确,对应用程序.消息没有特别的要求. using Timer = System.Timers.Tim ...