关注到它是在一次分享会当中，很神奇，只需写一行代码就可以变身很美的视觉效果，这就是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. 利用微信公众平台实现自动回复消息—java版

    最近公司需要拿微信公众平台做个东西,所以就开始了最基本学习,网上很多是php版的,对于我这个只会java,不会php的就只能在网上找点只言片语来一点一点学习了.不费话了直接贴图看效果(很简单的). 不 ...

  2. ASP.NET4.5Web API及非同步程序开发系列3

    ASP.NET4.5Web API及非同步程序开发系列(3) 接着上一篇博客的内容做一个补充,正好是一个大哥提出来的,我们看看一个有趣的现象. 请求相关问题的补充: 我们先在Controller中的定 ...

  3. 自己做个 Tag标签

    这是效果图,下面是源码,时间有限,有时间再完善 http://files.cnblogs.com/wxwall/tag.zip

  4. HNCU1324:算法2-2：有序线性表的有序合并(线性表)

    http://hncu.acmclub.com/index.php?app=problem_title&id=111&problem_id=1324 题目描述 已知线性表 LA 和 L ...

  5. qt的安装及连接sql使用注意

    qt安装与使用 今天写下qt使用的注意事项,qt-project.org上已经更新了qt5的相关库,但是建议不是很熟系qt的朋友,或者说想使用传统qt api而不是qml的朋友, 继续下载老版本4.8 ...

  6. https时代来了，你却还一无所知？

    本文作者:茄果,专注前端开发领域,更多文章请关注知乎专栏<前端小事> 现在打开各大知名网站,你有没有发现地址栏都已经加了个绿色的小锁? 是的,这就是https,这就是https的时代. 然 ...

  7. Java核心技术 卷Ⅰ 基础知识（1）

    第三章 Java的基本程序设计结构 Java对大小写敏感 命名规范为骆驼命名法,不能使用保留字 main方法必须声明为public 如果main方法正常退出,java应用程序的退出代码为0,表示成功运 ...

  8. 按自己的想法去理解事件和泛型（C#）

    上一篇那些年困扰我们的委托(C#)讲了委托,这一篇自然就轮到事件了. 不喜欢官方的表达方式,喜欢按照自己的想法去理解一些抽象的东西. 事件 考虑到委托使用的一些缺陷,就有了事件.委托是不安全的,打个比 ...

  9. Swift Array copy 的线程安全问题

    Swift Array copy 的线程安全问题 NSArray 继承自 NSObject,属于对象,有 copy 方法.Swift 的 Array 是 struct,没有 copy 方法.把一个 A ...

  10. 链接中的href=#是什么意思呢

    链接当前页面. ------------------- 通常有如下用法: <a href="#" onclick="window.close()"> ...