关注到它是在一次分享会当中，很神奇，只需写一行代码就可以变身很美的视觉效果，这就是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. linux下安装java

    搞了一年IT了,作为IT人没怎么玩过linux挺丢脸的,要好好整整. 先从熟悉的来,在linux下开发java,首先要搭建环境. linux有一个工具yum,非常好用. 1.yum install j ...

  2. Android While 循环导致的资源占用过高进而导致程序崩溃问题

    Timeline: Activity_launch_request time:6562004-14 15:31:25.347: I/dalvikvm(3483): Total arena pages ...

  3. 跨站请求伪造（Cross Site Request Forgery (CSRF)）

    跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Sit ...

  4. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  5. Android 短信模块分析(三) MMS入口分析

    MMS入口分析:      在Mms中最重要的两个Activity,一个是conversationList(短信列表) ,另一个就是ComposeMessageActivity(单个对话或者短信).每 ...

  6. struts2对ognl表达式的使用（配图解加讲解）

    ognl它是一个功能强大的表达式语言,用来获取和设置Java对象的属性,它旨在提供一个更高的更抽象的层次来对Java对象图进行导航. 先看一张示意图 如果是下面的除了第一种valueStack的下面几 ...

  7. 捕鱼达人代码例子下载地址 mac版

    捕鱼达人代码例子下载地址  mac版: http://pan.baidu.com/share/link?shareid=1431898404&uk=3189484501

  8. erlang集成开发环境搭配配置出现的问题

    问题:Unable to create the selected preference page.  com.avaya.exvantage.ui.interfaces.eclipse.plugin  ...

  9. dom4解析xml格式文件实例

    以下给4种常见的xml文件的解析方式的分析对比: DOM DOM4J JDOM SAX 解析XML文件的几种方式和区别答: Dom解析 在内存中创建一个DOM树,该结构通常需要加载整个文档然后才能做工 ...

  10. 为什么需要DevOps

    过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps 就是开发(Development) 和运维(Operations)这两个领域的合并.(如 ...