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

    Lambda应用模式 前言 在使用 Lambda 表达式时,我们常会碰到一些典型的应用场景,而从常用场景中抽取出来的应用方式可以描述为应用模式.这些模式可能不全是新的模式,有的参考自 JavaScri ...

  2. 统计知识选讲（二）——主成分分析（PCA）的推导和应用

    1.数学推导 根据上讲的思想,我们可以用下图来进行数学上的推导. 2.PCA的步骤 1)对原始数据进行标准化处理:对该指标变量进行标准化, 2)计算相关系数矩阵(协方差矩阵) 3)计算相关系数矩阵的特 ...

  3. 手动创建servlet

    1 tomcat/webapps/目录下创建web应用mail.   目录结构如下   tomcat/webapps   |    mail   |    WEB-INF     |        | ...

  4. sharepoint 2013 文档库eventhandle权限控制

    记录一下如何在sharepoint server 2013文档库中,使用eventhandle控制文档库document library的条目item权限. ///<summary> // ...

  5. [重构到模式-Chain of Responsibility Pattern]把Fizz Buzz招式重构到责任链模式

    写一段程序从1打印到100,但是遇到3的倍数时打印Fizz,遇到5的倍数时打印Buzz,遇到即是3的倍数同时也是5的倍数时打印FizzBuzz.例如: 1 2 Fizz 4 Buzz Fizz 7 8 ...

  6. <我的外骨骼，诺基>后的访谈

    <我的外骨骼,诺基>后的访谈 在接下采访任务之前,我对杨贵福的了解仅仅限于:有名的科幻作家,男性,成年.我虽然读过他的许多作品,但在这些作品中并不能找到作者的影子.我试着从作品的行文风格中 ...

  7. 学习OpenCV：滤镜系列（15）——羽化（模糊边缘）

    ============================================== 版权所有:小熊不去实验室CSDN博客 ================================== ...

  8. es6笔记2^_^array

    一.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...

  9. 从c#基础到java基础的学习的感悟

    从进入培训公司到现在已经有三周多了,我想我和绝大多数人一样,能考虑进入培训学校,肯定是心理做好了准备的,那就是只有一个目的学好这门技术,从之前的开班典礼来看,从每个同学的自我介绍,我们这的大部分人来这 ...

  10. labview 调用 matlab script的神坑！ Error 1050 occurred at LabVIEW

    显示变量没有被定义,原因是clear 关键字的问题,去掉即可!!! 未找到 文件路径,定位: 文件路径中不能有中文路径