卡片悬停放大不生效是因为缺少transition属性，必须在基础类中定义transition而非仅在:hover中；移动端hover不可靠，需用JavaScript或替代方案；scale放大可能导致模糊或布局错位，应结合overflow隐藏、wrapper包裹或硬件加速优化。
卡片悬停放大不生效？检查 transform 和 transition 是否同时存在
只写 transform: scale(1.05) 不会触发动画，必须搭配 transition 才能产生平滑缩放。常见错误是只加了 hover 状态下的 transform，却忘了在默认状态（或 hover 前）声明 transition 属性。
推荐写法：在卡片基础类（如 .card）上直接定义过渡行为，而不是只写在 :hover 里：
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
-
transition必须写在非 hover 的基础选择器中，否则第一次悬停会“跳变” - 避免只写
transition: all 0.3s，它会过渡所有可变属性，可能引发意外重绘或性能抖动 - 如果卡片内含图片或文字，
scale()会连带缩放内容，若需保持文字清晰，可对子元素用transform: scale(1/1.05)反向抵消（不常用，慎用）
Bootstrap 5 卡片的 padding/margin 影响放大后布局错位
Bootstrap 的 .card 默认有 margin-bottom，放大后可能压到下方卡片，或导致父容器高度突变。这不是 transform 本身的问题，而是视觉溢出 + 文档流未预留空间。
- 给卡片父容器（如
.row或自定义 wrapper）加overflow: hidden，裁掉超出部分 - 改用
transform: translateY(-4px) scale(1.05)微调垂直位置，缓解下沉感 - 更稳妥的做法：把卡片包裹一层
<div class="card-wrapper">，设固定高度和overflow: hidden，让放大限制在内部
移动端触摸设备上 hover 效果不可靠
iOS Safari 和多数安卓浏览器对 :hover 支持有限——通常只在点击后短暂触发，且不会持续。单纯依赖 :hover 会导致移动端几乎无反馈。
立即学习“前端免费学习笔记（深入）”；
- 不要假设用户一定用鼠标；测试时务必真机点按，而非仅靠桌面 Chrome 模拟
- 如需跨端一致反馈，改用 JavaScript 监听
touchstart/touchend切换 class（例如.card-is-hovered），再配 CSS 过渡 - 或者放弃放大，改用更稳妥的
box-shadow加深 +opacity微调，这些属性在触摸设备上响应更稳定
scale 放大后边缘模糊？和设备像素比与渲染层有关
部分浏览器（尤其 Chrome）对非整数倍 scale()（如 1.05）会启用 subpixel 渲染，导致文字或边框轻微发虚。这不是 bug，但影响观感。
- 尝试用
scale(1.04)或scale(1.06)替代，有时能避开模糊临界点 - 对卡片加
will-change: transform（仅在 hover 时加），提示浏览器提前升层，减少重绘抖动 - 极端情况可强制开启硬件加速：
transform: scale(1.05) translateZ(0)，但注意过度使用可能增加内存开销
真正难处理的是嵌套卡片、flex 容器内卡片、或配合 Bootstrap 的 .card-group —— 这些场景下 transform 会干扰 flex 项目的尺寸计算，得单独测 layout 表现。别只看单个卡片效果。
