磨砂玻璃效果需用 backdrop-filter: blur(8px–12px) 配合半透背景，而非 filter: blur()；须确保背景可穿透、父级无遮挡，并兼顾浏览器兼容性与性能。
blur() 值设多大才像磨砂玻璃？
直接用 filter: blur(20px) 通常过糊，边缘发虚、文字不可读；太小（如 blur(2px)）又看不出玻璃感。真实磨砂玻璃效果依赖「中等模糊 + 背景透出 + 颜色叠加」三者配合，blur(8px) 到 blur(12px) 是多数场景的起点，但必须配合半透明背景和 backdrop-filter 才成立。
关键点：
- 单独对元素自身用
filter: blur()是错的——它会模糊元素内容（比如文字），而磨砂玻璃要的是「透过它看背后内容」 - 真正该用的是
backdrop-filter: blur(10px)，它只模糊元素背后的区域，不碰自身内容 -
backdrop-filter在 Safari 和 Chrome 115+ 支持良好，但 Firefox 默认禁用（需手动开启layout.css.backdrop-filter.enabled）
为什么加了 backdrop-filter 还是没效果？
常见原因是父容器或祖先节点「截断了背景传播」。CSS 中，backdrop-filter 只能作用于「透过该元素可见的、且未被遮挡的背景区域」。如果父元素有 background-color、opacity 或 <code>transform（未触发新层叠上下文），背景就会被挡住。
排查步骤：
- 确保目标元素本身有
background-color: rgba(255, 255, 255, 0.1)（不能是transparent，否则无「玻璃」载体） - 检查其所有父级：移除
background、opacity、will-change等可能中断背景穿透的属性 - 若父容器用了
overflow: hidden，且子元素超出，则超出部分的背景无法被 backdrop-filter 捕获 - 在 Chrome DevTools 中选中该元素 → Elements 面板 → Styles → 查看「Computed」里的
backdrop-filter是否显示为生效状态（非not supported或invalid）
如何兼容不支持 backdrop-filter 的浏览器？
不能靠 @supports (backdrop-filter: blur(1px)) 就完事——很多旧版 Chrome/Safari 识别该规则但实际渲染异常（比如整个区域变黑）。稳妥做法是渐进增强 + 视觉降级：
- 先写基础样式：
background: rgba(255, 255, 255, 0.1)，至少保留半透感 - 再用
@supports (backdrop-filter: blur(1px))包裹增强代码，并额外加-webkit-backdrop-filter: blur(10px)（Safari 旧版本需要） - 避免在降级状态下强行模拟模糊（比如用多重 box-shadow 叠加），性能差且失真；接受「无模糊但有透光」作为合理 fallback
- 注意：IE 完全不支持，Edge 17+ 才开始支持，若需覆盖 Edge 16 或更低，只能放弃 backdrop-filter
blur() 和 background-blend-mode 能一起用吗？
可以，但容易弄混作用对象。例如：background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(bg.jpg); background-blend-mode: overlay; 这段只是混合图层，和 backdrop-filter 无关。真正要叠加的是「模糊后的背景」与「玻璃层自身颜色」。
实用组合：
- 给玻璃容器设
background: rgba(255, 255, 255, 0.08)（极淡白） +backdrop-filter: blur(10px) - 再加一层
::before伪元素，用background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 50%)模拟高光散射，增强质感 - 慎用
background-blend-mode在 backdrop-filter 上——它作用于元素自身的 background 图层，不是背后内容，容易导致色彩污染
最易被忽略的一点：blur 值越大，对 GPU 渲染压力越明显，尤其在滚动或动画中。iOS Safari 下 blur(12px) 以上可能引发掉帧，建议在移动端优先用 blur(6px)~8px) 并关闭 transform: translateZ(0) 类强制硬件加速的 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
