用 backdrop-filter + 半透 background-color 是最轻量可控方式，需用 ::before 伪元素设 position: absolute、z-index: -1，加 backdrop-filter: blur(8px) 和 rgba 背景，卡片设 overflow: hidden，并双写 -webkit-backdrop-filter 兼容 Safari。
卡片悬浮时如何用 CSS 实现背景模糊遮罩
直接用 backdrop-filter + background-color 半透层是最轻量、最可控的方式。别试图用 filter: blur() 去模糊整个卡片——它会把文字和边框一起糊掉，且无法局部控制模糊区域。
关键点在于：遮罩层必须是卡片内部的伪元素或子元素，且层级要盖在内容之下、卡片背景之上：
-
::before伪元素设为position: absolute，z-index: -1，覆盖整个卡片尺寸 - 给伪元素加
backdrop-filter: blur(8px)和background: rgba(255, 255, 255, 0.15) - 卡片本身需设
overflow: hidden，否则模糊效果会溢出边界 - 注意 Safari 需要
-webkit-backdrop-filter前缀（iOS 15+、macOS Monterey+ 基本都支持）
投影交互怎么避免“浮起来又掉下去”的闪烁感
常见错误是只在 :hover 里加 box-shadow，导致重绘时布局抖动。真正稳的写法是：卡片默认就带一层浅阴影，hover 时只增强强度和偏移，不改变尺寸。
- 初始状态用
box-shadow: 0 2px 8px rgba(0,0,0,.08) - hover 状态改为
box-shadow: 0 6px 24px rgba(0,0,0,.16)，保持0水平偏移，避免左右跳 - 务必配合
transition: box-shadow .2s ease，别忘了加transform: translateY(-2px)来模拟轻微上浮——但这个位移量必须小（≤4px），否则破坏视觉平衡 - 如果卡片用了
border-radius，确保 hover 前后圆角值一致，否则过渡动画会拉扯
Bootstrap 5 下怎么不破坏栅格系统嵌入这种卡片
Bootstrap 的 .card 默认有内边距和边框，直接套模糊遮罩容易让内容贴边或溢出。必须重置部分默认样式，而不是靠外层容器硬撑。
- 去掉默认边框：
border: none，改用box-shadow控制轮廓 - 清除内边距：
card-body里用p-0或自定义 class 清除 padding，把留白交给伪遮罩层的透明度控制 - 确保父容器是
.row，卡片用.col-*-分栏，别用.d-flex包裹卡片——flex 容器会干扰backdrop-filter的渲染层级 - 若需响应式缩放，慎用
scale()动画：它会放大模糊区域，导致性能下降，优先选transform: translateY()+box-shadow组合
移动端点击反馈失效或延迟怎么办
iOS Safari 对 backdrop-filter 的 hover 支持极弱，且 touch 设备没有真正的 hover 状态。必须用 :active + JavaScript 补充交互闭环。
- 给卡片加
ontouchstart=""（空属性）可提前触发 iOS 的点击识别，避免 300ms 延迟 - CSS 中补充
&:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,.08); }，让点击瞬间回归原始状态 - 如果用了
pointer-events: none在遮罩层上，记得在伪元素里显式设回pointer-events: auto，否则 iOS 点击区域会失效 - 真机调试时重点看
backdrop-filter是否被降级为纯透明层——Safari 开发者工具里检查 computed styles，确认backdrop-filter值未显示为none
模糊遮罩的兼容性比想象中窄，尤其老版本 Android WebView 几乎全挂；如果目标用户含大量企业微信或钉钉内置浏览器，得准备降级方案——比如用半透色块替代模糊，别强依赖 backdrop-filter。
