hover 时用 filter: blur() 需作用于目标元素本身而非父容器，backdrop-filter 才适用于模糊背后内容；两者均需注意兼容性、性能及降级方案。
hover 时用 filter: blur() 最直接
浏览器原生支持，不需要 JS，写两行 CSS 就能生效。关键点是：必须给元素本身加 filter，不能只加在伪类上还指望父容器“透出”模糊——blur() 作用的是该元素的渲染层，不是背景。
常见错误是这么写：
.box {
background: url(./bg.jpg);
}
.box:hover {
filter: blur(4px); /* ❌ 错！图片没被模糊，只是 box 容器变糊了，但图还在底下清晰显示 */
}正确做法是让要模糊的内容（比如图片、文字块）作为独立子元素，或直接对带背景的元素用 backdrop-filter（见下一条）：
.box::before {
content: "";
position: absolute;
inset: 0;
background: url(./bg.jpg);
filter: blur(4px);
z-index: -1;
}
.box:hover::before {
filter: blur(8px);
}
backdrop-filter 模糊「背后」内容（适合毛玻璃效果）
如果你想要的是「悬停时让元素下方的背景变模糊」（比如导航栏浮在内容上、hover 时出现毛玻璃感），backdrop-filter 才是正解。它只影响元素背后的堆叠上下文，不模糊自身内容。
立即学习“前端免费学习笔记（深入）”；
注意三点：
- 必须配合
background-color（哪怕rgba(255,255,255,0.1)）才能看见效果，纯透明时无效 - 需要开启硬件加速（加
transform: translateZ(0)或will-change: backdrop-filter）来避免 Safari 卡顿或失效 - Firefox 默认禁用，需手动开启
about:config → layout.css.backdrop-filter.enabled = true（生产环境慎用）
.glass-btn {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); /* Safari 兼容 */
transition: backdrop-filter 0.3s;
}
.glass-btn:hover {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}IE 和旧版 Edge 不支持 filter 和 backdrop-filter
IE 完全不支持这两个属性；Edge 17+ 支持 filter，但 backdrop-filter 直到 Edge 79（Chromium 内核）才支持。如果项目还需兼容 IE，别硬上，改用渐变遮罩 + 低分辨率背景图模拟模糊感更实际。
检测是否支持可这样写降级：
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-btn {
/* 启用毛玻璃 */
}
}
@supports not (backdrop-filter: blur(1px)) {
.glass-btn {
background: rgba(255, 255, 255, 0.3); /* 降级为半透明白底 */
}
}性能敏感：大图 + 高值 blur() 会掉帧
blur(10px) 在 4K 屏幕上处理区域很大，连续 hover 切换容易触发重绘卡顿，尤其在移动端。实测发现：
-
blur()值超过6px后性能下降明显，建议控制在2–4px区间 - 动画中避免和
transform、opacity外的属性一起过渡（比如同时动width+filter） - 对图片元素模糊，不如提前用 ImageMagick 或 Figma 导出一张模糊版，hover 时切换
src，更稳
真正要兼顾效果与流畅，往往得在模糊强度、过渡时长、作用范围三者间做取舍——比如只模糊边框区域，或加 will-change: filter 提前提示渲染引擎，但别滥用。
