-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. 解决"authentication token manipulation error"

      昨天安装是Ubuntu Server. 配置好了几个软件后就忘记继续了...今天打开,居然忘记了密码...真是的..  后来还是要改了. 不想重新弄什么的了..百度了下怎么改密码...然后就有一篇 ...

  2. Docker学习记录常用命令

    1. docker ps  -a 查看运行中的容器 2. docker images 查看docker镜像 3. docker rm id(容器id)  删除容器(容器id可以通过docker ps查 ...

  3. 学 python

    1. 推荐的学习教程:<python简明教程> 2. 不推荐的学习教程,可以偶尔查查:<Dive into python>,偶尔查查挺好,看多了走火入魔. 3. 推荐一个pyt ...

  4. chrome crx插件存档

    https://github.com/mdamien/chrome-extensions-archive

  5. Openssl ciphers命令

    一.简介 ciphers指令是用来展示用于SSL加密算法的工具 二.语法 openssl ciphers [-v] [-ssl2] [-ssl3] [-tls1] [cipherlist] 选项 -v ...

  6. Ubuntu14.04下 安装xhprof

    1.下载xhprof包: wget http://pecl.php.net/get/xhprof-0.9.4.tgz 2.解压 进入扩展目录 .tgz cd /home/justphp/xhprof- ...

  7. CEPH集群RBD快照创建、恢复、删除、克隆(转)

    Ceph支持一个非常好的特性,以COW(写时复制)的方式从RBD快照创建克隆,在Ceph中被称为快照分层.分层特性允许用户创建多个CEPH RBD克隆实例.这些特性应用于OpenStack等云平台中 ...

  8. javascript总结21:javascript-JSON与遍历

    1 什么是JSON JavaScript Object Notation(JavaScript对象表示形式) JavaScript的子集 JSON和对象字面量的区别 JSON的属性必须用双引号引号引起 ...

  9. CodeForces 681D Gifts by the List (树上DFS)

    题意:一个家庭聚会,每个人都想送出礼物,送礼规则是, 一个人,先看名单列表,发现第一个祖先 就会送给他礼物,然后就不送了,如果他没找到礼物 他会伤心的离开聚会!告诉你m个祖先关系, 和每个人想给谁送! ...

  10. SQL*Plus用法指南

    SQL是一种命令式的语言,它是用户操作数据库的最重要的一种方式.SQL语句在执行时,需要有一个执行环境. 开发人员在开发软件时,最终的结果是形成一个应用程序.在应用程序中可以嵌入SQL语句,利用这些S ...