必须在按钮默认样式中声明transition: transform 0.15s ease-out，再配合:active { transform: scale(0.95); }，否则仅写:active会导致瞬间缩放无动画；iOS需加cursor: pointer或touch-action: manipulation激活:active。
直接用 :active + transform: scale() 就能实现，但不加 transition 就是闪一下，写了却没效果大概率是触发条件或声明位置错了。
为什么写了 :active { transform: scale(0.95); } 却没动画？
因为 transform 本身不带过渡，它只是“状态切换”。动画必须靠 transition 驱动，而且它得写在按钮的默认样式里，不能只塞在 :active 中。
-
:active { transform: scale(0.95); }单独存在 → 点下去瞬间缩，松手突兀弹回，毫无反馈感 - 正确写法：在常态规则中加
transition: transform 0.15s ease-out;，再配:active { transform: scale(0.95); } - 别用
transition: all 0.15s;—— 会监听所有属性变化，拖慢响应，还可能让文字渲染发虚 - 缩放值建议固定用
scale(0.95)：低于0.9容易触发 subpixel rendering 失效，文字模糊；高于0.98用户几乎感知不到
iOS Safari 上 :active 完全不触发怎么办？
iOS Safari 默认对无交互暗示的元素禁用 :active 样式，这不是 bug，是策略。得手动“唤醒”它。
- 最轻量方式：给按钮加
cursor: pointer;（哪怕只是内联 style） - 更稳妥方案：加
touch-action: manipulation;，既激活:active，又消除 300ms 点击延迟 - 如果按钮是
<div>而非语义化<button>，务必加role="button" tabindex="0"，否则部分系统不识别可点击性 - 确认页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则事件分发可能异常
缩放后文字/图标模糊、边缘锯齿怎么修？
这是高 DPR 设备（如 iPhone、MacBook）上非整数缩放叠加渲染插值导致的，不是代码错，但可以缓解。
立即学习“前端免费学习笔记（深入）”；
- 对图标类元素，加
image-rendering: crisp-edges;（Chrome）或image-rendering: -webkit-optimize-contrast;（Safari） - 文字模糊时，加
-webkit-font-smoothing: subpixel-antialiased;禁用系统灰度抗锯齿 - 如果父容器有
overflow: hidden或scroll，缩放可能被裁剪，加transform-style: preserve-3d;防止层叠上下文截断 - 频繁缩放引发抖动？加
will-change: transform;提前提示浏览器做图层提升
真正容易被忽略的是：缩放中心点默认是 center，但按钮含内边距、图标或文字不对齐时，scale(0.95) 会看起来像“偏移抖动”。显式声明 transform-origin: center 不是可选项，是必选项——尤其当按钮是 inline 元素或 flex 子项时，不同浏览器默认处理差异很大。
