优先用 transform: scale() 实现按钮点击变大，性能最佳；若需影响布局，改 padding 比改 width/height 更安全；box-shadow 需脱离 transform 层，可用父容器控制或 filter: drop-shadow()；:active 伪类反馈弱，应 JS 控制 is-pressed 类；iOS 需设 -webkit-tap-highlight-color: transparent。
按钮点击时盒子变大，但别用 transform: scale()
直接改 width 或 height 会触发重排（reflow），动画卡顿明显；而 transform: scale() 只走合成层，性能好——但它不改变盒模型尺寸，后续布局不会响应变化。如果你真需要「按钮变大后挤开旁边元素」，就得动盒模型本身，但得接受性能代价。
实操建议：
- 优先用
transform做视觉反馈，这是最稳的方案 - 如果必须影响布局（比如点击后展开下拉区），改
padding比改width/height更安全，对重排影响小一点 - 加
transition: padding 0.2s, box-shadow 0.2s，别漏写多个属性，否则只有第一个生效
box-shadow 点击变深，但阴影别随 scale 一起缩放
用 transform: scale() 时，如果同时设了 box-shadow，阴影也会被缩放，导致点击态阴影看起来变淡、发虚。这不是 bug，是渲染逻辑决定的——transform 作用于整个渲染层，阴影也跟着变。
解决办法只有一个：别让阴影进 transform 层。
- 把阴影写在父容器上，按钮本体只做 scale，父容器控制阴影变化
- 或者改用
filter: drop-shadow()，它不受 transform 缩放影响，但注意兼容性：IE 不支持，iOS Safari 旧版本有渲染毛刺 - 示例：
button:active { transform: scale(0.95); } button:active::before { content: ""; position: absolute; inset: -4px; box-shadow: 0 0 12px rgba(0,0,0,0.3); }
:active 伪类不够用？得补 JavaScript 监听 mousedown/up
:active 在触摸设备上延迟高、持续时间不可控，松手后立刻回弹，反馈感弱；PC 上鼠标移出再点下，:active 还可能失效。真要一致的点击反馈，得靠 JS 控制类名。
关键点：
- 监听
mousedown和touchstart加is-pressed类，mouseup/touchend移除——别只写click，它太晚 - 加
touchcancel防止手势中断后类名残留 - CSS 里写
.btn.is-pressed { transform: scale(0.95); box-shadow: ...; }，和 :active 分开维护更可控
移动端点击反馈被禁用？检查 -webkit-tap-highlight-color
iOS Safari 默认点击会有半透明灰块，它会盖住你自定义的阴影和缩放效果。不是你的 CSS 失效，是系统高亮层在作祟。
必须关掉：
- 全局加
* { -webkit-tap-highlight-color: transparent; }，或只针对按钮：button { -webkit-tap-highlight-color: transparent; } - 注意：设成
transparent而不是none，后者在部分 iOS 版本下无效 - 这个样式必须写在 CSS 文件里，内联 style 不生效
真实项目里最容易被忽略的是：transform 和 box-shadow 的组合行为在不同浏览器渲染路径下不一致，尤其是 Safari 对 filter: drop-shadow() 的模糊半径处理偏大。调效果时别只看 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
