filter:FlipV()垂直翻转对象内容。
filter:blur()模糊效果!
代码加在HTML容器Css属性设置里！
所加载的容器要有有效的高和宽！！
filter只有IE浏览器支持的！
如果不会设置HTML的CSS，那就麻烦了！
filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。
语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
使用效果： 查看demo
demo 是我的GitHub主页，当鼠标放在圆形上面的时候，圆形会旋转，这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:
而完整卡片又该怎么写呢？
首先是它的 <html>结构：
CSS样式：
圆角背景：
圆形样式：
投影层的样式：
文字的样式：
如此，便可不用一张图，写出这张卡片了。
不是很明白你要的是什么效果，既然是导航，本来z-index就会高于内容，不会影响误操作到内容，没必要做遮罩层。鼠标放到哪，哪模糊，用a:hover实现就行了，你如果要遮罩整个界面而不只是导航下面那部分，那做一个遮罩层就行了，做成半透明，控制他的display在none和block之间变换，绑定移入移出事件给导航的各个元素。
