-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. python-nmap模块常用方法说明

    一.模块常用方法说明 本节介绍python-nmap模块的两个常用类,一个为PortScanner()类,实现一个nmap工具的端口扫描功能封装:另一个为PortScannerHostDict()类, ...

  2. C++ std::unordered_map

    std::unordered_map template < class Key, // unordered_map::key_type class T, // unordered_map::ma ...

  3. Windows Server 2012 R2 Standard x64 deploy Visual Studio 2015 Application

    When I run the Server application on Windows Server 2012 R2 operation system. I meet the error:MSVCP ...

  4. 实践作业4:Web测试实践(小组作业)每日任务记录1

    会议时间:2017年12月21日会议地点:东九教学楼自习区主 持 人:王晨懿参会人员:王晨懿.余晨晨.郑锦波.杨潇.侯欢.汪元记 录 人:王晨懿会议议题:小组作业熟悉和任务分配 (一)选择待测产品 我 ...

  5. Ubuntu14.04-LTS 从系统安装到配置可用

    1.安装Ubuntu14.04LTS-64bit 使用U盘安装很方便快捷,可以使用老毛桃使用iso模式制作一个U盘启动盘,然后分区安装. 如果使用硬盘安装的话需要注意的问题是: 如果电脑上以前有Lin ...

  6. 解决gitosis中authorized_keys不自动更新问题

    1.拷贝一个管理员权限用户的id_rsa.pub到服务器端 这里我拷贝的是yang电脑的key,命令如下: scp  /home/yang/.ssh/id_rsa.pub serveradmin@服务 ...

  7. idea 提示Resource registered by this uri is not recognized (Settings | Languages & Frameworks | Schemas and DTDs)

    idea出现如上图所示的错误提示时,可以用如下方式解决 点击红色代码部分,鼠标悬停后出现红色灯泡,如下图所示 点击灯泡后,选择第一个选项就可以解决了

  8. ubuntu虚拟机安装简单pxe服务器

    安装环境: vmware2台虚拟机,一台用来做pxe服务器(安装tftp.dhcp.apache2等服务),另一台用来做安装测试. 虚拟机的网络配置:dhcp的虚拟网络为192.168.10.100/ ...

  9. IE6,7,8 CSS HACK

    1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6.IE7.IE8背景紅色 ...

  10. 【C#】泛型

    泛型是一个非常有用的技术,在博客园里面有太多说到泛型的好文章,这里我推荐一篇我个人觉得非常全面,也非常齐全的文章. (重造轮子很傻!!!) C# -- 泛型(1) C# -- 泛型(2) C# -- ...