CSS中实现“毛玻璃”效果需用backdrop-filter而非background-blur，它模糊元素背后内容，须配合半透明背景和可被模糊的父容器，注意兼容性与性能优化。
background-blur 在 CSS 中并不存在，要用 backdrop-filter
HTML 本身不提供背景模糊功能，所谓“毛玻璃”是纯 CSS 实现的视觉效果，核心依赖 backdrop-filter 属性。它作用于元素自身，对其**背后的区域**（即父容器或更外层内容）施加滤镜，而非对自身背景图模糊。
常见误解是用 filter: blur()，但那会模糊整个元素（包括文字、子节点），不是毛玻璃；而 backdrop-filter 只模糊“后面透过来的东西”，文字依然清晰。
- 必须配合半透明背景（如
background-color: rgba(255,255,255,0.7)）才能看到模糊效果，纯不透明背景会挡住背后内容 - 父容器需有可被模糊的内容（比如带图片/文字的 body 或 section），否则模糊无从体现
- 移动端 Safari 和 Chrome 98+ 支持良好，但旧版 Android WebView、IE 完全不支持，需加
@supports检测或降级
基础毛玻璃卡片写法（含兼容性兜底）
一个典型场景：悬浮在图片上的半透明信息卡片。关键三步：设背景透明、启用 backdrop-filter、限制作用范围。
.glass-card {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari 必须加前缀 */
border-radius: 12px;
padding: 20px;
}-
backdrop-filter值单位必须是长度（如10px），不能用em或% - Safari 15.4+ 才支持无前缀版本，生产环境务必保留
-webkit-backdrop-filter - 如果卡片内有阴影（
box-shadow），模糊效果不会影响阴影，但阴影可能削弱通透感，建议调低 opacity
blur 值过大导致性能卡顿或边缘发虚
超过 20px 的 blur 值在中低端设备上容易引发渲染掉帧，尤其配合滚动或 hover 动画时。更隐蔽的问题是：模糊半径越大，元素边缘越容易出现“光晕”或颜色溢出（尤其在深色背景交界处）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 推荐值域为
6px–12px，兼顾质感与性能 - 避免在
position: fixed元素上滥用，因模糊区域会随视口变化实时重绘，开销更高 - 若发现边缘发灰/发白，尝试微调
background-color的 alpha 值（如从0.7降到0.55），比减小 blur 更有效
Firefox 默认禁用 backdrop-filter，需手动开启
Firefox 自 100 版本起支持 backdrop-filter，但部分 Linux 发行版或企业策略可能默认关闭。用户访问时若完全看不到模糊，先检查是否启用：
- 地址栏输入
about:config→ 搜索layout.css.backdrop-filter.enabled→ 确保值为true - 开发时可用
@supports (backdrop-filter: blur(1px))包裹样式，避免无效声明污染渲染流程 - 不建议用 JS 检测支持性后动态加 class，因为
backdrop-filter的支持判断本身不可靠（某些浏览器返回 true 却渲染异常）
真正难处理的是模糊区域边界——当父容器有圆角、裁剪或 transform 时，模糊可能被截断或错位，这时得靠重构 DOM 层级或改用伪元素模拟，而不是硬调参数。
