filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。
语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
使用效果： 查看demo
demo 是我的GitHub主页，当鼠标放在圆形上面的时候，圆形会旋转，这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:
而完整卡片又该怎么写呢？
首先是它的 <html>结构：
CSS样式：
圆角背景：
圆形样式：
投影层的样式：
文字的样式：
如此，便可不用一张图，写出这张卡片了。
滤镜属性被子元素继承了，这个纯css不能解决，这玩意子继承了父的模糊根本覆盖不了：
<body>
<div id="a">id=a这层单独放：图片背景+模糊滤镜</div>
<!-- 下面id=b这个div里面才放你网页主要结构 -->
<div id="b">
<div class="horizontal-scroll-area" style="width:3000px"></div>
<div class="horizontal-scroll-pips"></div>
</div>
</body>
然后：
----------------------------------------------------------------------
css 定位属性让 b 重叠在 a 上面合适位置
(给a、b外面再加个父级并相对定位，a、b分别绝对定位)
弄个js，判断 a、b 两个区域的高度，让矮的那个始终高度等于高的那个
(现成的js网上到处都是，自己百度)
CSS滤镜:Mask属性 Mask属性为对象建立一个覆盖于表面的膜CSS滤镜:blur属性 假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果
CSS滤镜:Chroma属性 Chroma属性可以设置一个对象中指定的颜色为透明色
CSS滤镜:DropShadow属性 DropShadow属性是为了添加对象的阴影效果的
CSS滤镜:FlipH、FlipV属性 Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转
CSS滤镜:Glow属性 当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果
CSS滤镜:Invert属性 Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值
CSS滤镜:Shadow属性 Shadow属性可以在指定的方向建立物体的投影
CSS滤镜:Wave属性 Wave属性用来把对象按照垂直的波纹样式打乱。
CSS滤镜:Xray属性 这种属性产生的效果就是使对象看上去有一种X光片的感觉
CSS滤镜:alpha属性 alpha是来设置透明度的
CSS滤镜属性详解教程：http://tech.163.com/05/0329/15/1G18AIVD0009158P.html
