欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS 滤镜技巧与细节

程序员文章站 2022-03-28 18:24:55
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: 基本用法 先简单看看几种滤镜的效果 你可以通过 hover 取消滤镜,观察该滤镜的效果。 简单来说,CS ......

本文主要介绍 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() 生成透明度