CSS 滤镜技巧与细节

本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！

注意：ie不兼容

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

{
    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 取消滤镜，观察该滤镜的效果。

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

常用用法

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

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