毛玻璃效果需手动添加css，核心是backdrop-filter: blur()配合半透明background-color和-webkit-backdrop-filter，且父容器不能overflow: hidden、背后需有可模糊的层次化背景。
毛玻璃效果依赖 backdrop-filter，不是 Bootstrap 5 自带功能
Bootstrap 5 的 .card 类本身不提供磨砂（frosted glass）效果，必须手动添加 CSS。核心是 backdrop-filter: blur()，但它只对「背景区域」生效——也就是说，卡片内容（文字、图片）不会被模糊，只有卡片背后的页面内容才会被模糊处理。
常见错误是直接给 .card 加 backdrop-filter 却没设 background-color 为半透明，结果啥也看不清；或者忘了加 -webkit-backdrop-filter，导致 Safari 下完全失效。
- 必须设置
background-color为带 alpha 通道的值，比如rgba(255, 255, 255, 0.1)或hsla(0, 0%, 100%, 0.1) - 必须显式声明
backdrop-filter: blur(10px)和-webkit-backdrop-filter: blur(10px) - 卡片父容器不能有
overflow: hidden，否则会裁剪模糊溢出区域（尤其在滚动时） - 避免在
body直接设深色背景——毛玻璃靠透出背后内容才有效果，纯色背景下只看到半透明色块
如何让卡片真正“透出背景”而不是只显示一层灰白
毛玻璃不是简单叠加半透明层，它需要背后有可被模糊的内容。如果你把 .card 放在纯色 div 里，再怎么加 backdrop-filter 都看不到磨砂感——因为背后没有“景深”。真实场景中，应确保卡片位于有层次的背景之上，比如带图片或渐变的 .bg-body-tertiary 区域，或自定义的 position: relative 容器。
- 推荐结构：
<div class="position-relative bg-gradient"><div class="card">...</div></div> - 不要给卡片父元素设
background-color，让它透出更上层的背景 - 如果用
fixed或sticky定位卡片，需确认滚动时背后内容仍在渲染范围内 - 部分安卓 WebView（如旧版 Chrome for Android）不支持
backdrop-filter，降级方案可用background: rgba(255,255,255,0.08)模拟轻微通透感
兼容性与性能要注意这些硬限制
backdrop-filter 在 Safari 9+、Chrome 76+、Edge 79+ 支持良好，但 Firefox 默认仍禁用（需用户手动开启 layout.css.backdrop-filter.enabled）。性能方面，频繁重绘（如动画中持续修改卡片位置）可能触发 GPU 过载，尤其在低端设备上表现为卡顿或模糊失效。
- 避免在
:hover中动态切换backdrop-filter值——改用transition: background-color更稳妥 - 不要对大量卡片同时启用，单页建议控制在 3–5 个以内
- 使用
will-change: backdrop-filter可能引发渲染异常，不推荐 - 检查 DevTools 的 Rendering 面板，勾选 “Paint flashing”，确认模糊区域是否被正确标记为合成层
一个最小可用的自定义类写法
直接在 Bootstrap 5 项目中添加如下 CSS，然后给卡片加 class="card-glass"：
.card-glass {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
注意：这个类不会覆盖 Bootstrap 的 .card 边框、圆角等基础样式，但会覆盖默认的 background-color。如果原卡片用了 .bg-light 这类背景工具类，记得去掉——否则会遮盖毛玻璃效果。
最易忽略的是父容器的 overflow 和背景层级关系；很多人调了半天 blur 值，最后发现只是卡片被包在一个 overflow: hidden 的 card-body 里，根本没东西可模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
