-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# 实现脚本辅助功能

    http://blog.csdn.net/w86440044/article/details/42493683 http://blog.csdn.net/wujizhishang/article/de ...

  2. Linux buffer and cache

    A buffer is something that has yet to be "written" to disk. A cache is something that has ...

  3. Centos6.6升级python2到python3

    系统更新部分: 一.由于系统原有的源无法连接,需要更新为新的源.起初,首选163的源,但是由于更改源以后,无法使用yum等问题,所以直接使用上海交通大学提供的源. 修改前,将原来/etc/yum.re ...

  4. nltk 之 snowball 提取词干-乾颐堂

    机器学习中很重要的应用场景就是机器自动分类,而分类的关键是词干提取.所以我们要用到snowball.下面说一下snowball 提取词干的两种方法. 两种方法: 方法一: >>> f ...

  5. [SoapUI] SoapUI可以做到些什么?功能有多强大?

    SoapUI. The Swiss-Army Knife of Testing. Whether you’re a tester, developer, business analyst, or ma ...

  6. 设计模式(java)--Bridge模式之蜡笔与毛笔的故事

    转自:吕震宇 http://www.cnblogs.com/zhenyulu/articles/67016.html#!comments 我想大家小时候都有用蜡笔画画的经历吧.红红绿绿的蜡笔一大盒,根 ...

  7. 关于解决百度sitemap1.0一直提示校验中问题

    实际原因是php设置问题,各个版本对应的设置有些不一样. php版本改成就好了. 修复方法:在插件里找到插件:\baidusubmit\inc.找到sitemap.php,查找curl_setopt( ...

  8. 使用Word2016发布CSDN博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  9. 基于RFID恢复信号场

    学习RFID的核心是什么?难处在哪?:https://www.zhihu.com/question/26799106

  10. [LintCode笔记了解一下]64.合并排序数组

    Given two sorted integer arrays A and B, merge B into A as one sorted array. 思路: 因为A的后面的部分都是空的留出来给我们 ...