CSS3滤镜 filter如何使用

1、blur：模糊      例：-webkit-filter:blur(2px);    

左边是原图，右边是滤镜后的图（用的是一个图片哦）

2、brightness：亮度      例：-webkit-filter:brightness(25%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

3、contrast：对比度      例：-webkit-filter:contrast(50%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

4、drop-shadow：阴影   例：-webkit-filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5));

左边是原图，右边是滤镜后的图（用的是一个图片哦）

5、opacity：透明度      例：-webkit-filter:opacity(50%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

6、grayscale：灰度      例：-webkit-filter:grayscale(80%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

7、sepia：褐色      例：-webkit-filter:sepia(100%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

8、invert：反色      例：-webkit-filter:invert(100%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

9、hue-rotate：色相旋转      例：-webkit-filter:hue-rotate(180deg);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

10、saturate：饱和度      例：-webkit-filter:saturate(50%);

左边是原图，右边是滤镜后的图（用的是一个图片哦）

11、以上是十种CSS3滤镜效果了，大家也快来试试吧！