Bootstrap 5 的 .card 默认无悬停放大，需用 transform: scale() + transition: transform 实现；scale 值推荐 1.03–1.12，配合 transform-origin: center、overflow: hidden 处理及 will-change: transform 优化性能。
直接给结论：Bootstrap 5 的 .card 默认不带悬停放大，必须手动加 CSS；用 transform: scale() + transition: transform 是唯一推荐路径，其他方式（如改 width/height）会触发重排、卡顿、模糊。
为什么不能只写 scale(1.1) 就完事？
单纯加缩放没动画感，且容易出视觉问题：
- 缺
transition：浏览器默认无过渡，.card:hover { transform: scale(1.1); }会“啪”一下跳变，不是平滑放大 - 缺
transform-origin: center：默认从左上角缩放，卡片会“向右下偏移”，看起来像被拽走 - 父容器
overflow: hidden没处理：放大后圆角或阴影被裁掉，尤其在.row或自定义 wrapper 里常见 - 用了
transition: all：连边框、阴影、文字都会过渡，性能差、边缘发虚
transform: scale() 的参数和取值怎么选？
缩放值不是越大越好，要兼顾视觉反馈与布局稳定：
-
scale(1.03)~scale(1.05)：Bootstrap 5 源码中$transition-base对应的节奏，轻微但可感知，不易撑破栅格 -
scale(1.08)~scale(1.12)：适合强调型卡片（如首页推荐位），但需确认父容器留有足够边距 - 避免
scale(1.0)或scale(1.01)：人眼基本看不出变化，用户以为失效 - 别用非整数像素值（如
scale(1.033)）：可能加剧 subpixel 渲染导致的文字模糊
移动端和首次悬停卡顿怎么解决？
:hover 在手机上不可靠，且首次缩放常有 1–2 帧延迟：
- 加
will-change: transform到.card基础样式里，提前提示浏览器升层，避免首帧卡顿 - 别依赖
:hover做核心交互：移动端点一下就触发，再点收起，体验错乱；如需一致行为，改用 JS 控制is-hovered类 - 若必须支持触屏“悬停感”，监听
touchstart+touchend模拟，但仅限按钮类小元素，.card这种大区域慎用 - 检查是否用了
backface-visibility: hidden：它能防止某些安卓 WebView 缩放时闪白，但非必需
真正难的不是写那三行 CSS，而是判断这张卡片是否该放大——它会不会在响应式断点下挤占相邻列？阴影会不会被 .container-fluid 的 overflow: hidden 截断？放大后内部 .btn 的 z-index 还够不够浮在最上？这些细节不试到真机+不同视口，光看代码是看不出来的。
