直接写 .card:hover { transform: scale(1.05); } 没有平滑动画效果，因缺少 transition: transform 0.3s ease; 声明；还需补充 transform-origin: center、overflow: hidden 和 z-index: 2 防偏移、溢出和遮挡，并注意图标模糊、响应式挤压及移动端触屏无 hover 的兼容处理。
为什么直接写 .card:hover { transform: scale(1.05); } 没反应
浏览器默认不为 transform 启用过渡动画，只写缩放会“啪”一下跳变，不是平滑放大。必须在基础类（如 .card）里显式声明 transition: transform 0.3s ease;，不能只塞进 :hover 里——否则首次悬停卡顿、移出时无动画。
常见漏项：
- transform-origin: center; 缺失 → 默认从左上角缩放，卡片视觉偏移
- overflow: hidden; 没加 → 放大后图片/图标撑破圆角或阴影被裁
- z-index: 2; 忘了 → 悬停时被相邻卡片盖住（Bootstrap 默认 z-index 是 0 或 1）
带图标的卡片怎么避免缩放后图标模糊或错位
图标通常来自 <i class="bi bi-star"></i> 或 SVG，scale() 会连带缩放所有子元素。但非整数缩放（如 scale(1.05)）易触发 subpixel 渲染，导致图标边缘发虚。
- 优先用整数比例：推荐
scale(1.04)或scale(1.08)，避开1.033这类小数 - 图标容器设
font-size: 1.2rem;或固定width/height，防止缩放后文字型图标失真 - 若用 SVG 图标，加
width: 1em; height: 1em;并设vertical-align: middle;对齐文本 - 别对图标单独写
transform: scale(1/1.05)反向抵消——会增加渲染负担，且和父级缩放不同步
响应式场景下缩放如何不挤占相邻卡片
Bootstrap 5 已废弃 .card-deck，直接套 .row > .col 布局时，scale() 不改变文档流尺寸，但视觉变大会压到邻居，尤其在小屏断点下。
可靠解法：
- 用 row-cols-1 row-cols-md-2 row-cols-lg-3 控制每行卡片数，避免末尾列空白拉伸
- 给 .card 加 h-100 类，统一高度防错位
- 父容器（如 .row）不加 overflow: hidden，改用 .card-wrapper 包裹单张卡片并设 overflow: hidden，把裁切限制在局部
- 移动端慎用大缩放值：小屏建议 scale(1.03)，桌面可升至 scale(1.08)
移动端点按没反馈？别只靠 :hover
iOS Safari 和多数安卓浏览器对 :hover 支持极弱，纯 CSS 悬停在触屏设备上基本无效。这不是 bug，是交互模型差异。
简单补救：
- 加 .card:active { transform: scale(1.03); }，至少点按时有瞬时响应
- 更稳妥：JS 监听 touchstart 添加 is-hovered 类，touchend 清除，CSS 写 .card.is-hovered { transform: scale(1.05); }
- 别信 @media (hover: hover) and (pointer: fine) —— iOS 真机常返回 false，不可靠
- 大面积卡片区域别强行模拟“悬停感”，点按意图模糊，体验反而下降
真正难的不是那三行 CSS，而是缩放后这张卡片在 sm 断点下是否还留有足够边距，在 container-fluid 里会不会被截掉阴影，内部图标在 Retina 屏上有没有发虚——这些得真机+多视口测，光看代码看不出。
