模态框背景模糊应使用 backdrop-filter 而非 filter，因其仅模糊背后内容而不影响模态框自身；需移除 .modal-backdrop 背景色，对 body.modal-open 应用 backdrop-filter，并处理 Safari 兼容性及内容区域透明度。
模态框背景模糊用 backdrop-filter 而不是 filter
Bootstrap 本身不提供背景模糊（frosted glass）效果，它默认的模态框背景是纯色半透明遮罩（modal-backdrop 的 background-color: rgba(0,0,0,.5)）。要实现毛玻璃效果，必须绕过 Bootstrap 默认 backdrop，改用 CSS 的 backdrop-filter: blur(10px) 作用于模态框父容器或 body 层级。注意：filter 会模糊整个元素及其子树（包括模态框内容），而 backdrop-filter 只模糊「背后」的内容，这才是正确选择。
常见错误是直接给 .modal-backdrop 加 filter: blur(10px) —— 这会让模态框自身也变糊，完全不可用。
如何安全覆盖 Bootstrap 模态框 backdrop 样式
Bootstrap 5 的模态框 backdrop 是一个独立的 <div class="modal-backdrop"> 元素，插在 <body> 最后。想让它支持模糊，不能修改它的 background-color（那只会变灰），而是要让它变成「透明容器」，再让其背后的 <body> 或 <main> 承担模糊责任。
- 移除默认 backdrop 的背景色：
.modal-backdrop { background-color: transparent !important; } - 给
<body>添加模糊样式（需确保 body 高度撑满视口）：body.modal-open { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Safari 必须加 */ } - 避免页面滚动时模糊失效：确保
body有min-height: 100vh，且模态框打开时body不被强制设为overflow: hidden（Bootstrap 默认会加，需重置）：body.modal-open { overflow: visible !important; }
响应式模糊强度与兼容性取舍
模糊值（如 blur(12px)）在小屏上容易过度削弱可读性，大屏则可能显得太“轻”。更稳妥的做法是按断点调整：
- 移动端（
max-width: 767px）建议用blur(4px)或关闭模糊（仅保留半透明白色遮罩） - 平板及以上启用
blur(8px)，并配深色主题降低对比干扰 - Safari 15.4+ 和 Chrome 103+ 支持
backdrop-filter，旧版 iOS/Safari 必须降级：@supports not (backdrop-filter: blur(1px)) { body.modal-open { background-color: rgba(255,255,255,.8); } }
模态框内容区域需显式隔离背景
如果模态框内容（.modal-content）本身带白色背景，模糊效果会被掩盖。必须确保它和 backdrop 之间存在「视觉间隙」：
- 给
.modal-content设background-color: rgba(255,255,255,.92)（不能是纯白） - 添加轻微阴影增强层次：
box-shadow: 0 8px 32px rgba(0,0,0,.12) - 禁用
.modal-dialog的margin自动居中，改用inset: 1rem+position: fixed，避免模糊区域被裁切
真正难的是 Safari 下 backdrop-filter 在 position: fixed 元素上的渲染异常——有时模糊会消失或错位。最稳方案是把模糊层单独抽成一个全屏 <div class="frosted-layer">，z-index 低于 modal 但高于 body 内容，并监听 show.bs.modal 事件动态插入/移除。
