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)
参考链接：
