应使用transform: scale()配合:active伪类和transition实现按钮点击平滑缩小，因width/height修改触发重排导致样式错乱，而scale()仅渲染层变换、GPU加速、等比缩放且性能更优。
直接用 transform: scale() 配合 :active 伪类 + transition，别碰 width/height —— 后者不是缩放，是盒模型挤压，文字、圆角、阴影全乱套。
为什么不能用 JavaScript 直接改 style.width 实现点击缩放
浏览器对 width 和 height 的修改会触发 layout（重排），尤其当元素带 border-radius、box-shadow 或子元素依赖尺寸时，动画过程容易撕裂、模糊、错位；而 transform: scale() 只走 GPU 加速的 repaint 路径，边缘锐利、性能高、真正等比缩放。
-
el.style.width = '80px'是强制重设盒模型，和“视觉上变小”不是一回事 - 连续 JS 赋值（比如 click 里先设
scale(0.9)再设scale(1)）不会产生中间帧，用户只看到跳变 - 用
getComputedStyle(el).transform拼接新scale值既慢又易出错，还可能丢掉已有旋转/平移
用 :active 实现点击瞬时缩放最简方案
这是最轻量、零 JS、兼容性好（IE10+）、且语义正确的做法：按下时缩放，松手自动回弹。
- 必须给目标元素加
transition: transform 0.15s ease（不要只写transition: scale，无效） -
:active中写完整变换值，例如transform: scale(0.95)，别漏单位 - 若元素已有其他
transform（如rotate(5deg)），:active里得合并写成transform: rotate(5deg) scale(0.95)，否则覆盖 - 移动端需确保
<meta name="viewport" content="user-scalable=yes">，否则双指缩放会被拦截，:active也可能不触发
button {
padding: 12px 24px;
background: #4a6fa5;
color: white;
border: none;
transition: transform 0.15s ease, background 0.15s;
}
button:active {
transform: scale(0.96);
background: #3a5a80;
}
需要 toggle 缩放状态（点一下放大、再点恢复）怎么办
这时 CSS :active 不够用，得靠 class 切换。核心是把缩放逻辑从“临时态”变成“持久态”，由 JS 控制 class 存在与否。
- JS 只负责
el.classList.toggle('is-scaled')，不操作style.transform - CSS 里定义
.is-scaled { transform: scale(1.3); }，并确保transition作用于父级或该 class 上 - 避免用
el.style.transform += ' scale(1.3)'—— 多次点击会叠加字符串，变成scale(1.3) scale(1.3)，最终崩掉 - 如果同时有 hover 放大和 click toggle，注意优先级：
:hover和.is-scaled冲突时，后者应写在后面或加!important（不推荐，改选择器权重更稳妥）
缩放中心点偏移导致“歪着缩”的问题
默认 transform-origin 是 0 0（左上角），点击时像被左上角吸住一样往里缩——这不是错觉，是真实行为。
- 居中缩放必须显式设
transform-origin: center（或50% 50%） - 如果元素用
position: absolute+top/left定位，center指的是元素自身中心，不是容器中心 - 滚动中固定定位的元素（
position: fixed）缩放时若没设transform-origin，视觉上会“漂移”，因为原点随视口移动
真正麻烦的不是写几行 CSS，而是缩放后元素内部文本行高、子元素定位、Canvas 渲染、SVG viewBox 等是否同步适配——这些地方 scale() 仅作用于渲染层，底层坐标系没变，稍不注意就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
