毛玻璃效果必须加在.modal-content上，因其浮于遮罩层之上且覆盖页面内容，是唯一能触发有效backdrop模糊的容器；需用带alpha通道的background-color、双前缀backdrop-filter、避免overflow:hidden，并用@supports做兼容处理。
直接给 .modal-backdrop 加 backdrop-filter 是无效的
这不是你写错了，而是浏览器行为限制：backdrop-filter 作用于元素「背后的内容」，而 .modal-backdrop 本身是纯色遮罩层（如 rgba(0, 0, 0, 0.5)），它背后只有 或根容器——但它的渲染层级在模态框内容之下，模糊采样区域实际为空白或被裁剪。Safari 会白屏，Chrome 看不到效果，Firefox 默认禁用该特性。
毛玻璃效果必须加在 .modal-content 上
真正需要模糊的是页面主体内容，而 .modal-content 正好浮在遮罩层之上、又覆盖在页面内容之前，是唯一能触发有效 backdrop 模糊的容器。
-
background-color必须带 alpha 通道，例如rgba(255, 255, 255, 0.92)；rgba(255, 255, 255, 1)（不透明）或transparent（全透）都会让模糊失效 - 必须同时声明
backdrop-filter: blur(8px)和-webkit-backdrop-filter: blur(8px)；Safari 不加-webkit-前缀等于没写 - 删掉或重置
.modal-content上可能存在的overflow: hidden—— 否则模糊边缘会被硬裁，看起来像贴了层灰边框 - 移动端建议
blur(4px–6px)，桌面端blur(8px–12px)；过大会拖慢滚动性能，尤其在低端 Android 设备上
遮罩层 .modal-backdrop 只负责调透明度，别动滤镜
它的作用就是视觉隔离：改 background-color 的 alpha 值即可控制“暗度”，不是用来模糊的。
- 加深背景：用
rgba(0, 0, 0, 0.7)，别低于0.15，否则失去遮罩感 - 换色但保持暗度：只调前三位 RGB 值，比如深蓝遮罩写成
rgba(30, 58, 138, 0.5) - 必须加
!important—— Bootstrap 5+ 大量使用内联样式或 CSS 变量，普通规则会被覆盖 - 绝对不要单独写
opacity: 0.3，它和background-color叠加后效果不可控；也别用十六进制色值如#000，没有 alpha 通道就等于不透明
兼容性与降级必须手动处理
backdrop-filter 在 Firefox 中默认禁用（需用户开启 layout.css.backdrop-filter.enabled），旧版 Edge 完全不支持。不能指望它“自动 fallback”。
- 先写基础半透明背景：
background-color: rgba(255, 255, 255, 0.15)，确保文字可读 - 再用
@supports (backdrop-filter: blur(1px))包裹滤镜声明，只在支持的浏览器中启用模糊 - 避免对
或全局容器应用，应限定在有明确背景图/色的父容器内（比如<section style="background: url(...) no-repeat"></section>） - 如果模态框内含滚动内容，注意
backdrop-filter在滚动时可能触发重绘卡顿，建议搭配will-change: transform微调性能
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
