CSS 滤镜技巧与细节

2022-06-20 15:53:43

本文主要介绍 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;

}

基本用法

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

CSS 滤镜技巧与细节

你可以通过 hover 取消滤镜，观察该滤镜的效果。

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

常用用法

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

  1. 使用 filter: blur() 生成毛玻璃效果
  2. 使用 filter: drop-shadow() 生成整体阴影效果
  3. 使用 filter: opacity() 生成透明度
上一篇：你所不知道的linq(二)


下一篇：【CSS】346- 你所不知道的 CSS 阴影技巧与细节