backdrop-filter: blur() 是实现玻璃态卡片的唯一靠谱方案，因其仅模糊元素背后区域而不影响自身内容，但需注意兼容性、背景穿透和滚动表现三大问题。
直接用 backdrop-filter: blur() 就能做出玻璃态卡片，但浏览器兼容性、背景穿透、滚动表现这三块最容易翻车。
为什么 backdrop-filter 是唯一靠谱方案
CSS 里没有“玻璃态”这个属性，本质是「半透明容器 + 背景模糊」的组合效果。早期有人用 opacity + rgba() 模拟，结果整个卡片内容（文字、图标）也变透明了，根本不是玻璃感——那是毛玻璃海报，不是玻璃卡片。
真正起作用的是 backdrop-filter：它只对元素「背后」的区域做滤镜，不影响自身内容。只要父容器有可透出的背景（比如带图的 或带渐变的 wrapper），就能立刻生效。
- 必须配合
background-color: rgba(255, 255, 255, 0.1)或类似低透明度色值，纯 transparent 不行（没基底，blur 没东西可糊） -
backdrop-filter: blur(12px)的数值别盲目拉高，iOS Safari 在 blur > 10px 时容易卡顿或降级为无效果 - 别忘了加
-webkit-backdrop-filter前缀，Safari 15.4 之前不认无前缀版本
卡片内容看不清？大概率是 contrast 失控了
玻璃卡片一加上，文字发灰、图标糊成一片，不是代码写错了，是对比度崩了。模糊+低饱和背景会吃掉文字锐度。
- 优先调
color：用高亮度色值，比如color: hsl(0, 0%, 95%)，比white更稳（white 在暗背景下可能过曝） - 慎用
text-shadow：单侧阴影（text-shadow: 0 1px 2px rgba(0,0,0,0.2)）比全向模糊更可控 - 图标建议用
filter: drop-shadow()替代 box-shadow，避免阴影也被 backdrop 模糊掉
在滚动容器里失效？检查 stacking context 和 overflow
把玻璃卡片塞进 overflow-y: auto 的 div 里，突然 blur 消失——这不是 bug，是规范行为：backdrop-filter 只对「同层 stacking context 中的背景」生效。一旦父容器设了 transform、will-change 或 overflow，就会创建新 stacking context，卡片背后只剩空白。
- 最简解法：把滚动容器的
overflow移到更高层（比如 body），让卡片始终“看到”页面真实背景 - 如果必须局部滚动，改用
clip-path+position: sticky模拟，避开 overflow 创建新层 - Chrome 115+ 支持
contain: paint缓解该问题，但 Safari 仍不支持，别依赖
真正难的不是写那三行 CSS，而是判断 blur 是否被父级截断、文字是否在不同设备上保持可读、以及 iOS 上那个神出鬼没的渲染降级——这些没法靠复制粘贴解决，得真正在真机上滑动着调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
