这篇文章主要介绍了 CSS3 中 filter（滤镜）属性使用，本文通过实例代码截图给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧。
前言
css3 的滤镜filter属性，可以对网页中的图片进行类似 Photoshop 图片处理的效果，通过 css 对图像进行处理。
浏览器支持情况：只有 IE 浏览器不支持filter（滤镜）属性，为了兼容低版本的 safari 和 google 浏览器，需要加上前缀-webkit- 。
基本概念
CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的 svg 滤镜。
filter: <filter-function> [<filter-function>]* | none filter: url(file.svg#filter-element-id)
<filter-function> 可以用于 filter 和 backdrop-filter 属性。它的数据类型由下列过滤器函数之一指定。每个函数需要一个参数，如果参数无效，则滤镜不会生效。以下是对滤镜函数含义的解释：
blur()：模糊图像brightness()：让图像更明亮或更暗淡contrast()：增加或减少图像的对比度drop-shadow()：在图像后方应用投影grayscale()：将图像转为灰度图hue-rotate()：改变图像的整体色调invert()：反转图像颜色opacity()：改变图像透明度saturate()：超饱和或去饱和输入的图像sepia()：将图像转为棕褐色
用法示例
/* 使用 SVG filter */
filter: url("filters.svg#filter-id");
/* 使用 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%);
/* 多个 filter */
filter: contrast(175%) brightness(3%);
/* 不使用 filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;
总结
本篇文章只是简单列举了几种使用 CSS filter 常用的页面效果，其实 filter 的每一种内置方法都可以有无限可能的扩展应用，如 invert 反转色同样也可以应用到 hover 效果上、调整网页sepia 褐色值可以实现护眼效果等。只要发挥想象力和创造力，filter 都可以在实践中得到很好的应用。