按钮需设半透明背景（如rgba）、祖先链无overflow:hidden等截断、safari需-webkit前缀，三者缺一不可才能生效。
直接给按钮加 backdrop-filter: blur() 没反应，不是写错了，是背后没内容可模糊、按钮自身不透、或祖先链截断了采样路径。
button 元素必须有半透明背景才能看到模糊效果
纯色背景（比如 background-color: #fff）或 transparent 都不行——前者完全挡住背后内容，后者没采样基底。必须用带 alpha 的颜色值。
-
background-color: rgba(255, 255, 255, 0.15)是安全起点；alpha 小于 0.2 时模糊感明显，大于 0.3 就容易像蒙了一层灰 - 别用
background: inherit或background: initial，它们不保证透明度，也不继承父级的 background-image - 如果按钮用了渐变背景，得显式重写：例如
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05))
blur 值不是越大越好，8px 是多数场景的平衡点
数值直接影响文字清晰度和滚动性能，尤其在移动端。
-
backdrop-filter: blur(4px)：适合小尺寸按钮（如 icon button），边缘柔和但字形锐利 -
backdrop-filter: blur(8px)：通用推荐值，通透感足，Chrome / Safari / Edge 均稳定 -
backdrop-filter: blur(12px)：仅用于大卡片式按钮，且背后背景纹理不能太密，否则层次感消失 - 超过
blur(16px)：中低端安卓机滚动易掉帧；iOS 上细字体（font-weight: 300）开始发虚
Safari 必须写 -webkit-backdrop-filter，且顺序不能错
即使 Safari 17+ 支持无前缀版本，生产环境仍需保留前缀——iOS 微信 X5 内核、旧版 macOS Safari 仍只认 -webkit-backdrop-filter。
- 前缀属性必须写在标准属性之前：
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); - 漏掉前缀 = Safari 下完全静默失效，控制台不报错、也不警告
- 加了
border-radius或overflow: hidden才能防止模糊溢出圆角外（Safari 特有 bug） - Firefox 默认禁用该特性（
layout.css.backdrop-filter.enabled = false），@supports 也检测不出，只能降级为高 alpha 纯色背景
背后内容必须真实存在且未被裁剪
backdrop-filter 不模糊按钮自己，只模糊它「背后」的内容。如果背后是空白、被 overflow 截断、或父容器没设背景，那就糊不出任何东西。
- 确保按钮父容器有视觉内容：比如
body设了background-image，或其上层 div 有图片/渐变/滚动露出的内容 - 祖先链中不能出现
overflow: hidden、contain: strict、isolation: isolate——这些会切断 backdrop 渲染链 - 如果按钮是 fixed 定位，要确认它确实盖在有内容的区域上（比如模态框内按钮，背后是滚动的列表）
- 避免同时对按钮设
transform或will-change: transform，可能触发新层叠上下文，导致背后内容不可见
最常被忽略的点：blur 效果依赖渲染上下文，而不是 CSS 规则本身。写对了样式，但 DOM 结构或祖先样式一动，就全失效。调试时优先检查「背后有没有图」「按钮透不透」「祖先有没有 overflow:hidden」这三点，比反复改 CSS 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
