首选 backdrop-filter 实现毛玻璃效果，它只模糊背景而不影响内容；若需兼容旧浏览器，则用伪元素分层+filter方案，并注意背景同步、尺寸扩大和 overflow: hidden。
直接用 filter: blur() 会把文字也糊掉
这是最常踩的第一个坑：给容器加 filter: blur(10px)，结果里面所有文字、图标、边框全变模糊了。毛玻璃要的是“背景糊、内容清”，而 filter 作用于元素自身及其全部子树，天生就不适合做背景虚化。
解决思路是分层：用伪元素（如 ::before）单独承载模糊背景，主容器保持清晰内容。关键点有三个：
-
::before必须和主容器使用完全相同的背景图/背景设置（包括background-position、background-size、background-attachment: fixed），否则会出现错位或拼接缝 - 伪元素尺寸要略大于主容器（比如
margin: -20px或width: 120%; height: 120%），否则边缘模糊会“被裁掉”，出现生硬白边 - 主容器需设
overflow: hidden，防止伪元素溢出破坏布局
backdrop-filter 才是专为毛玻璃设计的属性
backdrop-filter: blur(10px) 的语义就是“只模糊我背后的东西”，它不会碰你写的文字、按钮、SVG，也不需要额外伪元素或重复背景图。一行代码就能实现干净的毛玻璃效果。
但要注意现实约束：
- Safari 9+、Chrome 76+、Firefox 103+ 支持，旧版 Safari（尤其是 iOS 12 及更早）不支持，
@supports是必备检测手段 - 必须配合半透明背景（如
background: rgba(255,255,255,0.7)）才能看到模糊效果；纯透明（rgba(...,0)）或不透明背景会让backdrop-filter失效 - 在部分 Android WebView 中可能被禁用，微信小程序里仅 iOS 13+ 的
cover-view有限支持
白边、性能、移动端模糊半径怎么控
无论用 filter 还是 backdrop-filter，高斯模糊都会让像素向外扩散，导致边缘出现浅色晕染（尤其在深色背景下明显）。这不是 bug，是算法本质——但可以缓解：
- 对
filter方案：伪元素扩大范围 + 主容器overflow: hidden是标准解法；避免用transform: scale()强行拉伸，会劣化图像质量 - 对
backdrop-filter：目前无 CSS 原生裁剪机制，只能靠父容器overflow: hidden包裹，且确保父级有明确背景（否则模糊区域可能透出 body 底色） - 移动端建议模糊值 ≤ 8px；超过 10px 在中低端设备上容易掉帧，iOS 上尤其敏感
兼容性 fallback 必须写，不能只靠 @supports
@supports (backdrop-filter: blur(1px)) 能识别支持情况，但它只管“有没有”，不管“糊不糊得动”。有些浏览器虽声明支持，但在复杂滚动或动画中会自动降级为禁用状态。
真正可用的降级策略是双保险：
- 视觉层面：用
rgba()半透明背景模拟毛玻璃的“朦胧感”，虽然没模糊，但层级隔离效果仍在 - 结构层面：把模糊逻辑封装进 class，例如
.glass，再用 JS 检测CSS.supports('backdrop-filter', 'blur(1px)')并监听webkit-backdrop-filter实际生效情况（可通过 getComputedStyle 验证） - 别忘了 iOS Safari 对
backdrop-filter的硬件加速依赖：如果父容器用了will-change: transform或transform: translateZ(0)，反而可能触发渲染异常
实际项目里，backdrop-filter 是首选，但它的“支持”不等于“可靠”。真正难的不是写出那行代码，而是判断什么时候该用它、什么时候该悄悄切到 rgba 降级、以及怎么让白边不刺眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
