backdrop-filter没反应需先检查三件事：元素背景必须半透明（如rgba）、背后要有可采样内容、父容器不能设overflow:hidden裁剪采样区域。
backdrop-filter 加了没反应，先查这三件事
不是代码写错了，是毛玻璃效果根本没触发条件。它不模糊自己，只模糊“背后真实存在的内容”，所以必须同时满足：元素有半透明背景、背后有可被采样的视觉内容、父容器没裁剪采样区域。
-
background-color必须是带 alpha 的值，比如rgba(255, 255, 255, 0.15)；设成transparent或#fff就完全挡死，滤镜无像素可操作 - 按钮得放在有内容的层上——比如 body 有
background-image，或父容器内有滚动文字/图片；纯白页面里单独一个按钮，背后空无一物，blur 就是无效的 - 父容器不能同时有
overflow: hidden和border-radius，Safari 尤其敏感，会直接放弃模糊合成，显示为实心色块
按钮用 backdrop-filter 的正确结构
按钮本身是内联元素，backdrop-filter 对它默认无效。必须让它脱离文本流、获得独立渲染上下文，且确保背后内容可穿透。
- 给按钮加
display: inline-block或display: block，再设position: relative - 按钮的父容器（比如
<div>）要有实际背景，例如 <code>background: url('scene.jpg') center/cover或至少background-color: #333 - 按钮样式示例：
.glass-btn {<br> background-color: rgba(255, 255, 255, 0.12);<br> -webkit-backdrop-filter: blur(6px);<br> backdrop-filter: blur(6px);<br> border: 1px solid rgba(255, 255, 255, 0.2);<br> border-radius: 8px;<br> padding: 10px 20px;<br>} - 别在按钮上直接套
filter: blur()——那会糊掉文字，和毛玻璃逻辑冲突 -
blur(4px)：适合小尺寸按钮（如图标按钮），柔和但字形锐利，滚动/悬停时最稳 -
blur(6px)：通用推荐值，通透感足，iOS Safari 和 Chrome 109+ 上基本无掉帧 - 超过
blur(8px)就开始有风险：中低端安卓机上按钮 hover 时易卡顿；Retina 屏上细字体（font-weight: 300）边缘轻微发虚 - 别用
blur(0px)当开关——它仍触发 GPU 合成，开销和开的时候几乎一样 - Safari（包括 iOS 微信 X5 内核）必须保留
-webkit-backdrop-filter，即使新版支持无前缀，生产环境也得写双份 - Firefox 默认禁用该特性（
layout.css.backdrop-filter.enabled = false），且无计划开启；不能靠@supports检测后“启用”，只能降级：把background-color的 alpha 提高到rgba(255, 255, 255, 0.7)，加微光边框box-shadow: 0 0 12px rgba(255, 255, 255, 0.1) -
@supports检测必须双条件并列：@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))，单写等于放行 iOS 15.2 前 Safari，结果可能是白屏
blur 值选多大才合适
按钮尺寸小、交互频繁，blur 过大会让边缘发虚、文字识别变弱，还可能拖慢 hover 动画帧率。
Safari 和 Firefox 必须处理的兼容点
这两个浏览器是毛玻璃落地的最大变量。Safari 要前缀，Firefox 则基本不可靠。
