卡片悬停时背景模糊遮罩需用backdrop-filter配合半透明背景（如rgba(255,255,255,0.8)）实现，纯透明下无效；safari需加-webkit前缀，firefox默认禁用，须用@supports包裹并提供rgba降级；悬停投影应通过:hover动态切换box-shadow值并配transition，避免transform触发层叠上下文导致模糊错位。
卡片悬停时背景模糊遮罩怎么加
直接用 backdrop-filter 实现模糊遮罩，但必须配合半透明背景（如 rgba(255,255,255,0.8)）才能看见效果；纯透明背景下 backdrop-filter: blur(10px) 不会显示任何模糊——因为背后内容没被“裁剪”或“隔离”。Bootstrap 本身不提供该样式，得自己写 CSS。
关键点：backdrop-filter 在 Safari 和 Chrome 最新版支持良好，但 Firefox 默认禁用（需用户手动开启 layout.css.backdrop-filter.enabled），生产环境要加降级：
- 先写
background-color: rgba(255,255,255,0.85)作为基础层 - 再叠加
backdrop-filter: blur(12px)和-webkit-backdrop-filter: blur(12px) - 用
@supports (backdrop-filter: blur(0))包裹，避免老浏览器解析报错
如何让卡片悬停时投影自然增强
Bootstrap 的 .shadow-sm 到 .shadow-lg 是静态类，无法响应悬停。得用 CSS 的 :hover 动态切换 box-shadow 值。注意别只加大阴影尺寸——容易显得浮空不稳。
推荐组合参数（兼顾真实感和性能）：
-
box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12), 0 1px 3px -1px rgba(0,0,0,0.08)（悬停态） - 默认态用
.shadow-sm或自定义更轻的值：0 1px 3px -1px rgba(0,0,0,0.06) - 加上
transition: box-shadow 0.25s ease, transform 0.25s ease，避免突兀跳变
为什么加了 transform: translateY(-4px) 后模糊遮罩错位
因为 transform 会触发新层叠上下文（stacking context），导致 backdrop-filter 的“背后区域”被截断为卡片自身范围，而不是页面背景——模糊对象变成卡片底色，而非真实背景图/色。
解决方法只有两个：
- 去掉
transform，改用margin-top: -4px+margin-bottom: 4px模拟上浮（不影响层叠上下文） - 或者保留
transform，但把模糊遮罩层（如伪元素::before）提级到父容器，并用z-index确保它在卡片下方、背景上方
后者更灵活，但需确保父容器有 position: relative 且不溢出裁剪（overflow: hidden 会吃掉伪元素）。
移动端点击卡片时模糊和投影失效怎么办
iOS Safari 和部分安卓 WebView 对 :hover 支持极弱——触屏设备通常只在点击后短暂触发一次，松手即消失。不能依赖 :hover 做核心交互。
可行方案：
- 用 JavaScript 监听
touchstart和touchend，动态增删.is-hovered类（注意防重复绑定） - 对卡片加
cursor: pointer并启用tap-highlight-color: transparent避免点击灰块干扰视觉 - 更简单：放弃悬停动效，在移动端直接用常驻的中等强度
box-shadow和固定模糊层，保持一致性
别试图用 @media (hover: hover) 完全分离逻辑——很多安卓机谎报 hover 支持，反而造成 bug。
