高级CSS filters

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

在iOS系统上常常能看到高斯模糊(Gaussian Blur)效果,而这种效果早期使用CSS来实现是较为痛苦的一件事情。其实,早上2011年,浏览器就开始对CSS filters规范有所支持。也就是说在2011年浏览器就可以实现Filters效果。但这种效果基本上都只运用在SVG上(只有SVG支持Filter效果),而且只有Firefox浏览器支持,并且只能运用在HTML上。这也造就CSS要实现Filters效果是非常蛋疼的一件事情。比如说下图的效果:

高级CSS filters高级CSS filters

对于做原生开发的同学来说,这样的效果并不是难事(可以点击这里这里查看相关讨论),而我们是一名CSSer,我们坚持要用CSS来完成。

可能你首先想到的是CSS的filter中的blur(),或者SVG中的filter。但这些都不是新技术,而且到处也常见:

这些都不是CSS的新特性,那什么是新特性呢?不知道你是否有留意到@Johan在《Safari 9中有哪些新特性》一文中首先介绍的就是一个Backdrop filters,而且在@iamvdo的《高级CSS filters》对backdrop-filter属性做了详细的介绍。那么今天在这篇文章我们一起来看看通过哪些CSS的新特性可以实现类似iOS系统中那种高斯模糊效果。

backdrop-filter

backdrop-filter是在Filter Level2提出来的。其取值和filter Level1filter属性的属性值一样,包括:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/advanced-css-filters.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部