CSS3滤镜filter属性记录整理

filter 属性定义了元素(通常是

)的可视效果，例如图片的模糊、饱和度、灰度等……个人感觉功能很强大

1、filter的语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

2、各大浏览器当前时间的支持情况（来自Can I use：）

可以看到IE8,9,10,11、OPera Mini所有、以及Android Broswer4.3当前都是不支持

3、filter各函数

1）模糊效果blur(px)函数

原图（Top）与效果图（Bottom）：

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/43373.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/43373.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/43373.html

2）使图片变量brightness(%)函数

原图（Top）与效果图（Bottom）：

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/43373.html

4）调整图像对比度Contrast(%)函数

原图（Top）和效果图（Bottom）：

4）阴影效果drop-shadow（px,px,px,px）

原图（Top）和效果图（Bottom）：

5）将图像转换为灰度图像Grayscale(%)

原图（Top）和效果图（Bottom）：

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/43373.html

6）色相旋转hue-rotate(deg)

原图（Top）和效果图（Bottom）：

7）反转输入图像

原图（Top）和效果图（Bottom）：

8）改变图像的透明度

原图（Top）和效果图（Bottom）

9）饱和度设置saturate(%)

原图（Top）和效果图（Bottom）

10）将图像转换为深褐色sepia(80%)

原图（Top）和效果图（Bottom）

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/43373.html

11）URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素  url()

filter: url(svg-url#element-id)

12）复合函数使用多个滤镜，每个滤镜使用空格分隔。注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

原图（Top）和效果图（Bottom）

AI配图魔改

13）其他

initial：设置属性为默认值

inherit：从父元素继承该属性