bootstrap 5 不提供磨砂玻璃效果的内置类，需手动实现：先设半透明背景色，再用 backdrop-filter: blur() 实现模糊，兼顾兼容性降级与性能优化。
bootstrap 5 中没有内置“磨砂玻璃”（glassmorphism）类
bootstrap 本身不提供 backdrop-filter 或半透明毛玻璃背景的预设类。所谓“磨砂效果”，核心是两部分叠加：一层带透明度的背景色（如 rgba(255,255,255,0.1)），再叠加 css 的 backdrop-filter: blur(10px)。后者才是实现“模糊背景”的关键，而 bootstrap 的 bg-* 类只控制背景色，不触发滤镜。
手动添加 glassmorphism 样式需兼顾浏览器兼容性
backdrop-filter 在 Safari 和 Chrome 较新版本中支持良好，但 Firefox 默认禁用（需用户开启 layout.css.backdrop-filter.enabled），旧版 Edge 完全不支持。实际使用时必须提供降级方案：
- 先写基础半透明背景（如
background-color: rgba(255,255,255,0.15)），确保内容可读 - 再叠加
@supports (backdrop-filter: blur(1px))块，仅在支持的浏览器中启用模糊 - 避免对
.container或整页应用，应限定在有明确背景图/色的容器内（如模态框、卡片）
示例代码：
.glass-card {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari */
}
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background-color: rgba(255, 255, 255, 0.3);
}
}
与 Bootstrap 实用工具类组合使用要小心覆盖
Bootstrap 的 bg-opacity-10、bg-white 等类会直接设置 background-color，覆盖你自定义的 rgba() 值；rounded-3 可以保留，但 shadow- 类产生的阴影可能被模糊削弱视觉层次。建议：
- 不要混用
bg-*+bg-opacity-*和自定义 glass 样式，直接写完整background-color - 用
border或轻微box-shadow替代强阴影，维持边界感 - 文字务必搭配高对比度颜色（如
text-white或深灰#212529），避免因背景太透导致可读性崩塌
移动端性能敏感，blur 值不宜过大
超过 blur(12px) 在低端安卓机或 iOS WebView 中易引发卡顿或渲染异常。实测推荐范围是 blur(6px)–blur(10px)，并配合 will-change: backdrop-filter（谨慎使用，仅对频繁交互的元素加）。
另外，若父容器无明确背景（比如透明 body + 图片背景），磨砂效果会失效——因为背后没东西可模糊。务必确认玻璃区域下方存在非透明内容（如 body { background: url(...) } 或固定背景色容器）。
真正起作用的是背后的画面，不是玻璃本身。这点最容易被忽略。
