关注到它是在一次分享会当中,很神奇,只需写一行代码就可以变身很美的视觉效果,这就是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. Asp.net MVC3 中,动态添加filter

    Asp.net MVC3 中,动态添加filter filter是attribute,不支持泛型,传入的参数必须是固定的值.总之很受attribute本身的限制. 发现一篇老外的文章,动态设置filt ...

  2. jQuery easyui刷新当前tabs

    更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current ...

  3. 关于ToolStrip设置Location无效的问题

    问题现象 当多个ToolStrip使用ToolStripContainer布局时,可以让用户自己拖动工具栏,所以在程序关闭时必须保存用户拖动工具栏的位置,但是在再次打开程序后,还原回来的工具栏位置会有 ...

  4. 对C# 构造函数的理解

    C#构造函数是在创建给定类型的对象时执行的类方法. 构造函数具有与类相同的名称,它通常初始化新对象的数据成员.不带参数的构造函数称为“默认构造函数”. 无论何时,只要使用 new 运算符实例化对象,并 ...

  5. JIT动态编译器的原理与实现之Interpreter3

    JIT动态编译器的原理与实现之Interpreter(解释器)的实现(三) 接下来,就是要实现一个虚拟机了.记得编码高质量的代码中有一条:不要过早地优化你的代码.所以,也本着循序渐进的原则,我将从实现 ...

  6. Cygwin 各种情况下中文乱码--终极解决方案

    0.引言 本人从进公司以来一直负责公司Android平台下产品的NDK开发,用的工具: 01. Google的adt-bundle(集成了eclipse和sdk) 02. NDK 03. Cygwin ...

  7. jvm工具

    jvm工具 知识,经验是基础,数据是依据,工具是运营知识处理数据的手段 数据:运行日志.异常堆栈.GC日志.线程快照.堆转存储快照 JPS:虚拟机进程状况工具 jvm process status t ...

  8. 结构-行为-样式-Javascript笔记

    一.console.dir()可以显示一个对象所有的属性和方法. 二.递归遍历一个数据集合: A.数据: {  "menu": [    {      "menuId&q ...

  9. 基本的SQL语句

    一些常用的SQL语句大全参考:http://www.cnblogs.com/acpe/p/4970765.html 这篇博文整理的比较全,我摘抄一些基本常用的. 创建数据库 CREATE DATABA ...

  10. 人机ai五子棋 ——五子棋AI算法之Java实现

    人机ai五子棋 下载:chess.jar (可直接运行) 源码:https://github.com/xcr1234/chess 其实机器博弈最重要的就是打分,分数也就是权重,把棋子下到分数大的地方, ...