直接写 transform: scale(1.05) 没反应是因为缺少 transition 动画；需加 transition: transform 0.3s ease 并设置 overflow: hidden 防溢出，用 .card:hover 精准选择器，配合 transform-origin: center 和 z-index: 2 避免遮挡，触摸设备需补充 :active 或 js 类，阴影需手动调整 box-shadow。
为什么直接写 transform: scale(1.05) 没反应？
卡片没动，大概率是没加过渡动画。transform 本身不触发视觉变化，必须配合 transition 才能平滑放大。Bootstrap 卡片默认没有 overflow: hidden，悬停放大时内容可能溢出、遮挡邻近元素，这点常被忽略。
- 必须给卡片容器（如
.card）显式设置transition: transform 0.3s ease; - 如果卡片内有图片或按钮伸出边界，加
overflow: hidden;防止布局错乱 - 别只写
:hover，要确保选择器能精准命中——比如用.card:hover，而不是.card-body:hover
怎样让放大不挤压周围卡片？
Bootstrap 的 .card 默认是文档流中的块级元素，scale() 会改变渲染尺寸但不占新空间，容易造成“视觉重叠”。解决思路不是改布局模型，而是用 transform-origin 控制缩放中心，并配合 z-index 提升层级。
- 加
transform-origin: center;让放大以卡片中心为轴，避免边缘偏移 - 悬停时加
z-index: 2;（比默认的 0 或 1 高），防止被隔壁卡片盖住 - 如果卡片在
.row > .col里，无需改display或position，避免破坏 Bootstrap 栅格流
移动端点击没效果？记得处理 :active 和触摸兼容性
iOS Safari 和部分安卓浏览器对 :hover 支持弱，纯靠悬停在触摸设备上基本无效。不能只依赖 :hover，得补一层 :active 响应，或用 JS 监听 touchstart 切换 class。
- 简单方案：加
.card:active { transform: scale(1.05); }，至少保证点按有反馈 - 更稳妥：用 JS 在
touchstart时加is-hovered类，touchend清除，CSS 写.card.is-hovered规则 - 别忘了
@media (hover: hover) and (pointer: fine)媒体查询，把:hover限制在真有鼠标的设备上，避免误触发
和 Bootstrap 5 的 shadow-* 类一起用要注意什么？
shadow-sm / shadow-lg 这些是通过 box-shadow 实现的，而 transform 不影响阴影渲染位置——所以放大后阴影不会跟着变大，看起来像“脱离卡片”。这不是 bug，是 CSS 渲染规则决定的。
- 如果要阴影同步放大，得手动覆盖：
.card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }（值按需调） - 或者放弃内置 shadow 类，统一用自定义
box-shadow配合transform调整 - 注意
shadow-none会清空所有阴影，悬停时得重新声明，不能只靠继承
实际效果是否自然，取决于 scale 值和 transition 时长的微调——1.03–1.06 是安全范围，超过 1.08 容易显得突兀；0.2s–0.35s 是人眼感知流畅的临界点。这些数字没法套模板，得在真实设备上点几次、悬停几次才能定下来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
