滤镜，好久不见

grayscale滤镜（灰度滤镜）

彩色图片通过滤镜实现图片转变灰色

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: grayscale(80%);
    -webkit-filter: grayscale(80%);
    -moz-filter:grayscale(80%);
    height: 200px;
}

sepia滤镜（棕褐色滤镜）

让图片呈现出老照片的效果

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: sepia(80%);
    -webkit-filter: sepia(80%);
    -moz-filter:sepia(80%);
    height: 200px;
}

saturate滤镜（饱和度滤镜）

增强色彩图片的饱和度，让色彩更加鲜明，必须要使用大于100%，因为100%刚好是原色

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: saturate(80%);
    -webkit-filter: saturate(80%);
    -moz-filter:saturate(80%);
    height: 200px;
}

hue-rotate滤镜

该滤镜将图片中所有颜色沿着颜色环旋转一个角度，产生特殊的视觉效果

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: hue-rotate(90deg);
    -webkit-filter: hue-rotate(90deg);
    height: 200px;
}

invert滤镜（颜色翻转滤镜）

定义图片颜色的翻转程度

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: invert(90%);
    -webkit-filter: invert(90%);
    height: 200px;
}

opacity滤镜（透明度滤镜）

当属性值为100%时，完全不透明。该滤镜的作用与opacity样式属性的作用相同。但是opacity属性不具有硬件加速特性，而在某些浏览器中当使用opacity滤镜时将利用硬件加速特性，因而拥有更高的页面性能。

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: opacity(60%);
    -webkit-filter: opacity(60%);
    height: 200px;
}

contrast滤镜（对比度滤镜）

调试图片的亮度

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: contrast(50%);
    -webkit-filter: contrast(50%);
    height: 200px;
}

blur滤镜（模糊滤镜）

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    height: 200px;
}

drop-shadow滤镜（阴影滤镜）

.sub02{
    width: 330px;
    float: right;
    background: grey;
    filter: drop-shadow(4px -4px 7px  purple);
    -webkit-filter: drop-shadow(4px -4px 7px  purple);
    height: 200px;
}