CSS filter 属性的奇妙之旅
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;
}
}转自:前端老鹰
