你所不知道的 CSS 滤镜技巧与细节

本文主要详情 CSS 滤镜的不常用用法，希望能给读者带来少量干货！

OK，下面直接进入正文。本文所形容的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，语法如下，还未接触过这个属性的可以先简单到 MDN — filter 理解下：

{ 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;}

基本用法

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