CSS3 filter

Stella981
• 阅读 620

作者:汪娇娇

日期:2016.10.9

其实之前几乎都没用过filter属性,就算知道也只是在脑中留了点浅浅的印象,直到最近因为项目的原因,才对filter进行了一个大致的学习。filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。不过现在大部分浏览器也都做了兼容性,下面大家就一起来学习吧。

现在规范中支持的效果有:

  • grayscale 灰度                 值为0-1之间的小数 
  • sepia 褐色        值为0-1之间的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转   值为angle
  • invert 反色       值为0-1之间的小数
  • opacity 透明度      值为0-1之间的小数
  • brightness 亮度     值为0-1之间的小数
  • contrast 对比度     值为num
  • blur 模糊          值为length
  • drop-shadow 阴影

语法:

-webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px);

下面是一些小效果图:

(1)无效果   filter:none;

CSS3  filter

(2)模糊   filter:blur(10px);

CSS3  filter

(3)灰度   filter:grayscale(0.5); 

CSS3  filter

(4)亮度   filter:brightness(0.5);

CSS3  filter

(5)对比度  filter:contrast(2.6);

CSS3  filter

(6)饱和度   filter:saturate(7.9);

CSS3  filter

(7)色相旋转 filter:hue-rotate(260deg);

CSS3  filter

(8)反色   filter:invert(0.9);

CSS3  filter

(9)阴影  filter:drop-shadow(10px 10px 10px #000);

CSS3  filter

点赞
收藏
评论区
推荐文章
九路 九路
3年前
一篇文章带你了解CSS 渐变知识
CSS3渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候,你必须使用图像实现这些效果。然而,通过使用CSS3渐变可以减少下载时间和带宽的使用.此外,缩放的元素在缩放时看起来更好,因为渐变是由浏览器生成的。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。(来源于百度)数字后面的w
阿里程序员的Java之路!几乎囊括了Java的所有知识点
人生转折点去年的时候,几个玩的好的老同学就聊了起来,其中有个考上了西安财大,读了新闻系,毕业后干了不久就想做了,原因很现实,既感觉不到前途,也感受不到任何钱途,索性就去报了一个线下培训班学前端,没选择学Java的原因主要是因为前端的可视化,不会看着枯燥,现在在上海工作了2年多,也有20k的薪资。我也考虑了几天,索性还是去报了个培训班,白天工作,晚上学习,反
Python进阶者 Python进阶者
3年前
手把手教你使用CSS3为文本和元素实现添加阴影效果
使用CSS3,你可以为文本和元素添加阴影。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。数字后面的webkit或者moz使用时需要指定前缀。|属性|Chrome|Firefox|Safari|Opera|IE|||||||||text
Karen110 Karen110
3年前
一篇文章带你了解Django ORM操作(进阶篇)
回顾上次咱们学习了一下DjangoORM的基本查询操作。查询操作主要使用的是filter()方法。我们知道filter()查询出来的是值,如果想取第一个值需要再filter().first()才行。还知道了get()和filter().first()的区别等等。DjangoORM的查询还有很多,继续来看叭!!!查询操作对象.外键字段比如,我们拿到了一个
Wesley13 Wesley13
3年前
(原)ffmpeg过滤器开发和理解
最近学习了ffmpeg关于filter过滤器的开发,关于中间的几个相关概念,我们先放在简单介绍一下:AVFilterGraph:几乎完全等同与directShow中的fitlerGraph,代表一串连接起来的filter们.AVFilter:代表一个filter.AVFilterPad:代表一个filter的输入或输出口,等同于DShow中的Pi
Stella981 Stella981
3年前
Servlet的Filter的使用
    Filter可认为是Servlet的“加强版”,主要用于对用户请求进行预处理,也可以对HttpServletResponse进行后处理,是个典型的处理链。Filter也可以对用户请求生成相应,这一点与Servlet相同,但实际上很少会这样使用。使用Filter的完整流程是:Filter对用户的请求进行预处理,接着将请求交给Servlet进行处理并响应
Stella981 Stella981
3年前
Eclipse搭建springboot项目(八)拦截器、过滤器、监听器
知识点:1、SpringBoot2.x过滤器Filter和使用Servlet3.0配置自定义Filter(核心知识)  filter简单理解:人检票员(filter)景点  1)SpringBoot启动默认加载的Filter    characterEncodingFilter    
Stella981 Stella981
3年前
Spring Security 自带防火墙!你都不知道自己的系统有多安全!
之前有小伙伴表示,看SpringSecurity这么麻烦,不如自己写一个Filter拦截请求,简单实用。自己写当然也可以实现,但是大部分情况下,大家都不是专业的Web安全工程师,所以考虑问题也不过就是认证和授权,这两个问题处理好了,似乎系统就很安全了。其实不是这样的!各种各样的Web攻击每天都在发生,什么固定会话攻击、csrf
Wesley13 Wesley13
3年前
CSS3 文本效果
CSS3文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性:textshadowwordwrap浏览器支持!(http://static.oschina.net/uploads/space/2016/0123/124344_Ps
Wesley13 Wesley13
3年前
Java filter中的chain.doFilter详解
转载:一.chain.doFilter作用1.一般filter都是一个链,web.xml里面配置了几个就有几个。一个一个的连在一起requestfilter1filter2filter3….requestresource.2.chain.doFilter将请求转