按钮hover缩放没动画，一定是漏了transition声明；必须在常态规则（如.btn）中写transition: transform 0.2s ease-in-out，而非:hover中，否则仅硬切无过渡。
按钮 hover 缩放没动画？一定是漏了 transition 声明
只写 button:hover { transform: scale(1.04); } 不会动，浏览器只会硬切。缩放本身是瞬时变换，动画必须靠 transition 触发，而且它得写在**常态规则里**（比如 .btn 或自定义类），不能只塞进 :hover 中。
常见错误包括：
-
transition只写在:hover里 → 首次悬停跳变，移出时无过渡 - 用
transition: all 0.2s→ padding、border、color 全跟着动，引发抖动或重排 - 覆盖 Bootstrap 默认
.btn-primary:hover时没保留原有transition→ 颜色变和缩放不同步
正确写法示例：
.btn-hover-scale {
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-hover-scale:hover {
transform: scale(1.04);
}
阴影用 box-shadow 还是 filter: drop-shadow()？
box-shadow 更通用，但容易被父容器 overflow: hidden 裁剪；filter: drop-shadow() 是滤镜级渲染，不随缩放拉伸、也不受 overflow 影响，适合配合 transform: scale() 使用——不过 Safari ≤15.6 不支持，生产环境需降级。
如果选 box-shadow，务必同步加过渡：
.btn-hover-scale {
transition: transform 0.25s, box-shadow 0.25s;
}
.btn-hover-scale:hover {
transform: scale(1.04);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
注意：别混用多个 shadow-* 工具类（如 shadow-sm shadow-hover），后面会覆盖前面，最终只生效最后一个。
移动端点按卡住、文字模糊、边框变粗？这些不是“写错了”
transform: scale() 是等比缩放整个渲染层，所以字体边缘发虚、1px 边框被拉伸成 1.04px，都是正常现象，不是 bug。
缓解办法：
- 加
will-change: transform;提前提示合成层，改善模糊 - 避免
transform-origin偏移，默认center最稳 - 边框问题更推荐放弃
border，改用outline + outline-offset模拟，它不受transform影响 - 移动端根本不可靠
:hover，iOS Safari 和多数安卓浏览器只在点击瞬间触发，松手后不恢复 → 必须补:active或 JS
触屏适配建议：
.btn-hover-scale:active {
transform: scale(0.95);
}
/* 或用 JS */
btn.addEventListener('touchstart', () => btn.classList.add('touched'));
btn.addEventListener('touchend', () => btn.classList.remove('touched'));
.touched { transform: scale(1.04); }
缩放值设多少才靠谱？别贪大也别太小
scale(1.03) 是多数项目实际采用的平衡点：人眼可感知，又不破坏布局节奏。超过 scale(1.05) 容易撑破 .btn-group 或 .col 内部空间，相邻按钮被视觉挤压；更关键的是，Chrome/Firefox 在非整数缩放下触发亚像素渲染，文字边缘发虚。
如果按钮已有其他 transform（比如 rotate(2deg)），不能单独写 scale(1.04)，否则会覆盖旋转效果；应合并为：transform: rotate(2deg) scale(1.04);
真正容易被忽略的是缩放对布局的影响：放大后可能压到相邻元素，这不是动画问题，而是文档流没预留空间——得靠 overflow: hidden、transform-origin 或父容器 padding 补偿，不真机测很难发现。
