需修改transform、transition、transform-origin属性，并设置父容器overflow: hidden；推荐用.card:hover{transform:scale(1.1)}配合transition:transform 0.3s ease，避免内联样式和all过渡。
卡片悬停放大需要改哪些CSS属性
Bootstrap 5 默认的 .card 不带任何悬停动画，必须手动添加 CSS。核心是控制 transform: scale() 和过渡时间，同时注意避免布局抖动——放大时若不配 overflow: hidden 或固定高度，可能触发内容重排或边框错位。
- 必须给
.card设置transition: transform 0.3s ease（不能只写all，否则阴影、边框等也会过渡，影响性能） -
transform-origin: center确保从中心放大，而不是左上角 - 卡片父容器建议加
overflow: hidden，防止放大后圆角或阴影溢出 - 慎用
scale(1.05)之类小幅度值——人眼几乎看不出变化；scale(1.08)到scale(1.12)更稳妥
直接在HTML里加内联样式可行吗
不推荐。Bootstrap 的 .card 是语义化组件，内联样式会污染结构、难以复用，且无法响应鼠标移出状态（:hover 必须用 CSS 规则）。常见错误是写成：<div class="card" style="transition: transform 0.3s;" onmouseover="this.style.transform='scale(1.1)'">——这会导致移出后卡在放大态，且无法和 Bootstrap 的暗色模式、断点类协同。
<ul>
<li>正确做法：在自定义 CSS 文件或 <code><style></style> 块中写 .card:hover { transform: scale(1.1); }
$transition-base 变量保持风格一致.card-hover-scale，再写 .card-hover-scale:hover，避免全局污染放大后阴影和边框变形怎么办
默认 .card 的 box-shadow 和 border-radius 在缩放时会按比例拉伸，看起来变“虚”或“厚”。这不是 bug，而是 CSS 渲染机制决定的——transform 不影响盒模型，但视觉上阴影和边框像素会被拉伸。
- 解决阴影失真：改用
filter: drop-shadow()替代box-shadow，它不受transform影响（但注意 Safari 旧版本兼容性） - 边框变粗？别用
border，改用outline+outline-offset模拟，或者干脆去掉边框，靠阴影区分层次 - 更稳的方案：放大时仅动
transform，其他样式（阴影、圆角）保持原样，靠视觉惯性接受轻微失真——多数用户根本不会盯着边框像素看
移动端点击放大怎么兼容
iOS 和 Android 的触摸设备没有 :hover，纯 CSS 方案在点击后会残留放大态。这不是 Bootstrap 的问题，而是浏览器对伪类的实现差异。
- 简单处理：加媒体查询
@media (hover: hover) { .card:hover { transform: scale(1.1); } }，让 touch 设备完全跳过 hover 动画 - 要保留触控反馈？用 JS 监听
touchstart添加临时类，再用setTimeout移除，模拟“点击即放回”效果 - 注意：不要同时监听
mouseenter和touchstart，否则在混合设备（如带触控笔的 Windows 笔记本）上会触发两次
transform-origin 和父容器 overflow 的组合。没设 origin，卡片会往右下偏移；没封 overflow，放大后圆角切掉、阴影飘出容器，调试起来反而比写动画还花时间。
