导读：操作步骤/方法1blur：模糊例：-webkit-filter:blur(2px);2左边是原图，右边是滤镜后的图（用的是一个图片哦）3brightness：亮度例：-webkit-filter:brightness(25%);4左边是原图，右边是滤镜后的图（用的是一个图片哦）5contrast：对比度例：-webkit-filter:contrast(50%);6左边是原图，右边是滤镜后的图（用...
操作步骤/方法
1
blur：模糊例：-webkit-filter:blur(2px);
2
左边是原图，右边是滤镜后的图（用的是一个图片哦）
3
brightness：亮度例：-webkit-filter:brightness(25%);
4
左边是原图，右边是滤镜后的图（用的是一个图片哦）
5
contrast：对比度例：-webkit-filter:contrast(50%);
6
左边是原图，右边是滤镜后的图（用的是一个图片哦）
7
drop-shadow：阴影例：-webkit-filter:drop-shadow(5px5px5pxrgba(0,0,0,0.5));
8
左边是原图，右边是滤镜后的图（用的是一个图片哦）
9
opacity：透明度例：-webkit-filter:opacity(50%);
10
左边是原图，右边是滤镜后的图（用的是一个图片哦）
11
grayscale：灰度例：-webkit-filter:grayscale(80%);
12
左边是原图，右边是滤镜后的图（用的是一个图片哦）
13
sepia：褐色例：-webkit-filter:sepia(100%);
14
左边是原图，右边是滤镜后的图（用的是一个图片哦）
15
invert：反色例：-webkit-filter:invert(100%);
16
左边是原图，右边是滤镜后的图（用的是一个图片哦）
17
hue-rotate：色相旋转例：-webkit-filter:hue-rotate(180deg);
18
左边是原图，右边是滤镜后的图（用的是一个图片哦）
19
saturate：饱和度例：-webkit-filter:saturate(50%);
20
左边是原图，右边是滤镜后的图（用的是一个图片哦）
21
以上是十种CSS3滤镜效果了，大家也快来试试吧！
END
以上就是小编为大家介绍的CSS3滤镜 filter如何使用的全部内容，如果大家还对相关的内容感兴趣，请持续关注上海建站网！
标签：
内容声明：网站所展示的内容均由第三方用户投稿提供，内容的真实性、准确性和合法性均由发布用户负责。上海建站网对此不承担任何相关连带责任。上海建站网遵循相关法律法规严格审核相关关内容，如您发现页面有任何违法或侵权信息，欢迎向网站举报并提供有效线索，我们将认真核查、及时处理。感谢您的参与和支持！
