关注到它是在一次分享会当中，很神奇，只需写一行代码就可以变身很美的视觉效果，这就是CSS3滤镜。

语法

filter:fuction(param);

如今浏览器支持情况相比以前乐观很多，点击查看兼容

方法

1.blur模糊

2.brightness亮度

3.contrast对比度

4.grayscale灰度

5.hue-rotate色相旋转

6.invert反色

7.opacity透明度

8.saturate饱和度

9.sepia褐色

10.drop-shadow阴影

效果（非截图）

调整数值看效果，go~

比较喜欢的三种滤镜

CSS3 Filter滤镜效果的更多相关文章

  1. CSS3 filter 模糊滤镜的应用

    CSS3 filter 模糊滤镜的应用   在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...

  2. CSS3 Filter详解（改变模糊度 亮度 透明度等方法）

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  3. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  4. [转]CSS3 Filter的十种特效

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  5. CSS3 Filter特效

    CSS3 filter和IE的filter完全是两样东东. Filters主要是运用在图片上,以实现一些特效.(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用. 语法 elm { ...

  6. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  7. filter滤镜效果(css3属性)

    <!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...

  8. css3 filter属性在项目中的应用

    css3 属性filter应用在项目里. 语法: <filter>: 要使用的滤镜效果.多个滤镜之间用空格隔开. 设置或检索对象所应用的滤镜效果. 最常用的滤镜效果是不透明效果,如果要实现 ...

  9. 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

随机推荐

  1. slxna，游戏页面切到后台回来后返回sl页面导致sl页面无响应，解决方法。

    slxna在wp7上表现很好,因为那会xna还是微软的亲儿子.但是到wp8时代,微软丢弃xna,不管不问了.但是丢之前没有把兼容搞的完美,以致有很多隐秘的坑,说不定就踩到了. 我这个游戏的sl页面用了 ...

  2. 配置 SQL Server Email 发送以及 Job 的 Notification通知功能

    配置 SQL Server Email 发送以及 Job 的 Notification通知功能 在与数据库相关的项目中, 比如像数据库维护, 性能警报, 程序出错警报或通知都会使用到在 SQL Ser ...

  3. 使用easy_install进行模块/包管理

    使用easy_install进行模块/包管理 今天在阅读以前项目代码时,发现里面使用的第三方模块的参数相当诡异,总是对不上.经过分析之后,发现是自己安装的第三方模块跟项目使用的版本不一致.在Pytho ...

  4. Ordering是Guava

    Guava学习笔记:Ordering犀利的比较器   Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易 ...

  5. How to install Savanna

    Pre-conditions: openstack has been installed successfully. 解压软件包中的savanna-all.tar.gz安装tar -C / -xzf ...

  6. computer专业术语总结

    计算机专业真可谓是博大精深,光语言就有N多种,而且各种算法计数,各个领域,加之新技术的不断出现, 如果想要穷尽 计算机的知识,那绝对是不那个可能的,只能在若干领域才能取得一定的成果,但是多了解一些专业 ...

  7. EF框架操作postgresql,实现WKT类型坐标的插入，查询，以及判断是否相交

    1.组件配置 首先,要下载.NET for Postgresql的驱动,npgsql,EF6,以及EntityFramework6.Npgsql,版本号 3.1.1.0. 由于是mvc项目,所以,把相 ...

  8. [Node.js]REPL(交互式解释器)

    摘要 REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并接收系统的 ...

  9. 【JS学习笔记】提取行间事件

    行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...

  10. CSS属性之absolute

    0.脱离标准文档流 绝对定位的元素会脱离标准文档流,拥有z-index属性,并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素,这里就不过多介绍. 不过值得注意的是,虽然绝对定位元素脱离的标准 ...