backdrop-blur在堆叠卡片中失效，主因是父容器overflow:hidden裁剪了采样区域；需删该属性、确保卡片带半透明背景（如bg-white/10）、背后有真实内容、并为safari加-webkit-backdrop-filter前缀。
backdrop-blur 为什么在堆叠卡片里完全没反应
写了 backdrop-blur-md 却像没写，大概率不是类名错了，而是 backdrop 的采样区域被裁掉了。堆叠卡片常用 position: absolute 或 z-index 提升层级，但父容器若设了 overflow: hidden，就会直接砍掉 backdrop 模糊所需的“背后内容”采样范围——结果就是卡片纯色、无模糊、边缘发硬。
- 检查堆叠容器是否用了
overflow: hidden；有就删掉，或改用mask或伪元素模拟裁剪 - 确保每张卡片自身带半透明背景：
bg-white/10可用，bg-white或bg-gray-50（不带斜杠）直接失效 - 背后必须真有内容：堆叠容器不能是
z-index: 0的空 wrapper，建议挂到document.body直接子级，或保证下方有滚动区域/背景图
卡片堆叠 + 玻璃质感的最小可行 class 组合
别把 backdrop-blur 和 z-index 分开调，它们得协同生效。下面这组 class 已验证在 Vite + Tailwind v3.4 下稳定工作：
class="relative bg-white/10 backdrop-blur-md rounded-xl p-4 shadow-sm hover:shadow-lg transition-shadow duration-200 ease-out z-10"
-
relative：建立层叠上下文，避免父容器遮挡阴影和 backdrop 采样 -
bg-white/10+backdrop-blur-md：玻璃质感双要素，缺一不可 -
z-10：初始层级设为正整数，别用负值；hover 时可加z-50置顶 -
transition-shadow duration-200：只动画阴影，比transition-all更稳，且不会干扰 backdrop 渲染
Safari 和微信浏览器里玻璃效果消失怎么办
Tailwind 默认生成的 backdrop-filter: blur(8px) 在 Safari ≤16.6 和微信 X5 内核里根本无效，而且控制台零报错——你根本不知道它挂了。
- 必须手动补 WebKit 前缀：在
@layer utilities里定义一个工具类，例如：.glass-stack { @apply bg-white/10 backdrop-blur-md; -webkit-backdrop-filter: blur(8px); } - 注意：WebKit 前缀里的数值必须和 Tailwind 的
backdrop-blur-md一致（默认是'md': '8px'），否则 Safari 显示未模糊的原始背景 - 微信 X5 内核完全不支持
backdrop-filter，降级 fallback 推荐：bg-black/5 blur-sm（作用于自身），别用filter: blur()配合透明背景，性能差还容易糊成一片
堆叠卡片滚动时玻璃感卡顿或闪烁
这不是代码 bug，是渲染上下文被破坏的典型表现。只要卡片或其父容器带 transform、opacity、will-change，就可能触发合成层切换，导致 backdrop 重绘延迟甚至丢帧。
- 堆叠卡片本身避免写
transform: translateZ(0)、opacity-95这类属性 - 滚动容器别设
overflow-y: scroll+overflow-x: hidden组合，改用overscroll-behavior: contain控制滚动传播 - iOS Safari 对 >12px 模糊敏感，堆叠场景优先用
backdrop-blur-md（8px）而非backdrop-blur-xl（16px）
玻璃质感的本质不是“加个滤镜”，而是让元素在视觉上既透又稳——层级、背景、采样区域、兼容性前缀，四个点漏一个，效果就断链。尤其堆叠场景下，z-index 和 backdrop-filter 是共生关系，不是叠加关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
