CSS 的filter属性就是你的 “魔法棒”，只需几行代码，就能为网页元素赋予各种惊艳的视觉效果，轻松提升页面质感。

认识filter属性

filter属性是 CSS 中用于对元素应用图形效果（如模糊、阴影、颜色调整等）的属性。它就像一个 “视觉特效师”，能让普通的图片、文字、按钮瞬间变得与众不同。filter属性的值是一个或多个滤镜函数的组合，每个滤镜函数都对应一种特定的效果。filter属性的基本语法如下：

.element {
  filter: filter-function();
}

例如，我们要为一个图片添加模糊效果，可以这样写：

img {
  filter: blur(3px);
}

这里的blur()就是一个滤镜函数，3px表示模糊的程度，数值越大，模糊效果越明显。

常用滤镜函数

2.1 模糊效果：blur()blur()函数用于给元素添加模糊效果，常被用于背景图片的虚化处理，营造出朦胧的美感，或是在鼠标悬停时，为元素添加动态的模糊过渡效果。

img {
  filter: blur(3px);
  transition: filter .5s ease-in-out;
}

img:hover {
  filter: blur(1px);
}

这个例子则展示了通过过渡动画，让图片在鼠标悬停时平滑地产生模糊变化，增加交互趣味性。
2.2 阴影效果：drop-shadow()
drop-shadow()函数可以为元素添加阴影，与box-shadow属性类似，但drop-shadow()更专注于模拟投影效果，且能更好地与滤镜链中的其他效果结合使用。

/* 为卡片添加投影 */
.card {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

上述代码中，0表示水平偏移量，4px表示垂直偏移量，8px是模糊半径，rgba(0, 0, 0, 0.8)则定义了阴影的颜色和透明度。通过调整这些参数，就能轻松打造出不同风格的阴影效果。
2.3 亮度调整：brightness()brightness()函数用于调整元素的亮度，可以让图片或元素变得更亮或更暗，数值范围是0%（全黑）到200%（两倍亮度），默认值为100%。

/* 降低图片亮度 */
.dim-image {
  filter: brightness(70%);
}

/* 鼠标悬停时，图片变亮 */
.highlight-image {
  transition: filter 0.3s ease;
}

.highlight-image:hover {
  filter: brightness(120%);
}

利用brightness()函数，我们可以实现图片在不同状态下的亮度变化，例如在图片列表中，让鼠标悬停的图片变亮，突出显示重点内容。
2.4 对比度调整：contrast()contrast()函数用于调整元素的对比度，数值范围同样是0%（完全没有对比度）到200%（两倍对比度），默认值为100%。提高对比度可以让元素的颜色更加鲜明，降低对比度则能营造出柔和的视觉效果。

/* 增加文字对比度 */
.strong-contrast-text {
  filter: contrast(400%);
}

/* 降低图片对比度 */
.soft-image {
  filter: contrast(50%);
}

2.5 色彩反转：invert()
invert()函数可以反转元素的颜色，将黑色变为白色，白色变为黑色，其他颜色也会相应地进行反转。它常用于创造有趣的视觉反差，或是制作具有科幻感、未来感的页面效果。

img {
  transition: filter 0.3s ease;
}

img:hover {
  filter: invert(100%);
}

兼容性与注意事项

虽然filter属性在现代浏览器中得到了广泛支持，但在一些老旧浏览器（如 IE 系列）中可能存在兼容性问题。为了确保网页在各种浏览器中都能正常显示，可以使用 CSS 特性查询（@supports）来提供回退方案：

.element {
  /* 不支持filter时的样式 */
  background-color: #ccc;
}

@supports (filter: blur(0)) {
  .element {
    /* 支持filter时的样式 */
    filter: blur(3px);
    background-color: transparent;
  }
}

转自:前端老鹰