CSS3 滤镜filter: blur()高斯模糊的应用

html-css011

CSS3 滤镜filter: blur()高斯模糊的应用,第1张

filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。

语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

使用效果： 查看demo

demo 是我的GitHub主页，当鼠标放在圆形上面的时候，圆形会旋转，这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:

而完整卡片又该怎么写呢？

首先是它的 <html>结构：

CSS样式：

圆角背景：

圆形样式：

投影层的样式：

文字的样式：

如此，便可不用一张图，写出这张卡片了。

注意： 小程序 高斯模糊效果 ，用库stack-blur无法使用； 因为小程序是没有window对象和document对象的。

一 、stack-blur库实现(原理：canvas)：

https://blog.csdn.net/u010852544/article/details/43967749

二 、CSS3实现(原理：filter)：

注意： 需要解决两个问题：容器外范围变模糊(用scale)与周围泛白(用overflow:hidden)

参考链接：

css谷歌有自己的一套样式比如grayscale。greyscale是css3filter里的一种属性，进行灰色滤镜。当然css3filter还有其它滤镜属性，很实用，例如：高斯模糊、调节亮度、色相旋转、饱和度等等。cssfilter这一用法允许将单个图像用于多个目的不同的图像，或者在浏览器中应用过滤器，而不是在图像编辑器中进行过滤，不会出现大小比原始图像大，从而可以更快地加载页面并减少数据传输。