CSS filter 语法
在 CSS 中，filter 属性用于为元素添加滤镜效果，可以用来美化图片、实现视觉特效，比如模糊、灰度、亮度调整等。
语法：
filter: none | 滤镜函数;说明：
filter 属性用于指定元素的一个或多个滤镜效果。
none：表示不应用任何滤镜效果。filter-function：表示应用一个或多个滤镜函数。
filter-function 是 CSS 滤镜的核心，它定义了具体的滤镜效果。CSS 提供了一些内置的滤镜函数，常用的滤镜函数如下表所示。
| 函数 | 说明 |
|---|---|
| brightness() | 调整亮度 |
| grayscale() | 灰度处理（黑白图） |
| sepia() | 复古风格（棕褐色） |
| invert() | 颜色反转 |
| hue-rotate() | 色相旋转（调色） |
| drop-shadow() | 投影效果（比 box-shadow 更灵活） |
| opacity() | 不透明度 |
| blur() | 模糊效果 |
| contrast() | 对比度调整 |
| saturate() | 饱和度调整 |
比如下面代码会把图片变成黑白，并且加上模糊效果。
img {
filter: grayscale(1) blur(3px);
}此外，小伙伴们还需要清楚以下几点。
- filter 属性会影响整个元素，包括文字、背景、边框和阴影等。
- filter 应用多个滤镜函数时，它们会按照从左到右的顺序依次作用于前一个滤镜的结果。
- 滤镜是图形处理操作，在一些性能较低的设备（尤其是移动端）上，可能会导致页面卡顿。
注意: filter 无法作用于行内文本，它通常搭配图片或块级元素使用效果更佳。
CSS filter 摘要
| 属于 | CSS 滤镜 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS filter 示例
接下来，我们通过几个简单的例子来讲解一下 CSS filter 属性是如何使用的。
示例 1：filter 实现模糊滤镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
/* 定义模糊滤镜 */
filter: blur(5px);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
filter: blur(5px); 表示定义模糊滤镜，其中模糊半径为 5px。
示例 2：filter 实现灰度滤镜和亮度滤镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
/* 定义灰度滤镜和亮度滤镜 */
filter: grayscale(100%) brightness(150%);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>
页面效果如下图所示。
分析：
我们可以同时给 filter 属性设置多个滤镜函数，其中 filter: grayscale(100%) brightness(150%); 表示同时使用灰度滤镜和亮度滤镜。
提示: 在某些特定时刻，我们需要将整个网站都设置成灰色调。想要实现这种效果其实非常简单，那就直接给 html 根元素设置灰色滤镜即可。
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Safari 和 Chrome */
}
示例 3：filter 实现阴影滤镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
/* 定义阴影滤镜 */
filter: drop-shadow(5px 5px 5px red);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
drop-shadow() 滤镜函数给图像设置了阴影效果。此时图像会添加一个红色阴影，水平偏移 5 px，垂直偏移 5px，模糊半径为 5px。
最后，对于其他滤镜效果，小伙伴们可以自行测试一下。
注意: 与 box-shadow 不同，drop-shadow 会忽略透明背景（比如 PNG、WebP中的透明背景）。
