CSS 滤镜技巧与细节

本文主要介绍 CSS 滤镜的不经常使用用法，但愿能给读者带来一些干货！spa

注意：ie不兼容code

本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，话很少说，直接开车，语法以下：blog

{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%);
 
    /* Apply multiple filters */ filter: contrast(175%) brightness(3%);
 
    /* Global values */ filter: inherit; filter: initial; filter: unset;
}

基本用法

先简单看看几种滤镜的效果图片

你能够经过 hover 取消滤镜，观察该滤镜的效果。ip

简单来讲，CSS 滤镜就是提供相似 PS 的图形特效，像模糊，锐化或元素变色等功能。一般被用于调整图片，背景和边界的渲染。ci

经常使用用法

既然是标题是你所不知道的技巧与细节，那么比较经常使用的一些用法就再也不赘述，一般咱们见得比较多的 CSS 滤镜用法有：it

使用 filter: blur() 生成毛玻璃效果
使用 filter: drop-shadow() 生成总体阴影效果
使用 filter: opacity() 生成透明度