伪元素模拟边框环是唯一可靠方案：用::before/::after设inset:0、border、transform-origin:center及scale(0→1)，配合position:relative和overflow:hidden；圆角锯齿通过inherit border-radius或inset收窄修复；卡顿需避免重排、混用transform；移动端改用:active触发并加touch-action优化。
伪元素模拟边框环是唯一可靠方案
直接用 border 动画做不到“从中心向外扩散”，因为 border 没有坐标原点，transform: scale() 作用的是整个元素，不是边框本身。你看到的“缩放”其实是按钮连带文字一起变大变小，点击区域、焦点环、无障碍支持全都会错乱。
真正能模拟“环形扩散”的，只有用 ::before 或 ::after 伪元素画一个独立的边框环，再对它做缩放：
- 按钮必须设
position: relative和overflow: hidden - 伪元素设
inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0），再加border和transform-origin: center - 初始
transform: scale(0)，:hover时改为scale(1) -
transition必须只写transform，别用all，否则可能触发重排或意外动画
圆角按钮下扩散边缘锯齿怎么修
当按钮有 border-radius（比如 8px），伪元素边框环缩放时，四个角会先“撑开”，导致短暂露白或边缘发虚——这不是 bug，是浏览器在圆角裁剪区外渲染边框的自然行为。
修复方式不是调 border-radius，而是控制伪元素的渲染范围：
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
border-radius: inherit，让它和按钮保持一致 - 把伪元素的
inset值略微收窄，例如inset: 2px（而不是0），相当于给边框环留出“呼吸空间” - 如果锯齿仍明显，可改用
box-shadow模拟扩散：用多层box-shadow+scale组合，避开圆角裁剪问题
扩散动画卡顿或跳变的常见原因
看起来是“扩散慢”，实际往往是布局抖动或合成层没对齐。关键不在时间值，而在属性选择和触发机制：
- 别用
margin或top/left控制伪元素位置——会触发重排，动画掉帧 - 确保伪元素没有内容（
content: ""），否则可能影响尺寸计算 - 避免在伪元素上同时用
transform和width/height—— 浏览器可能无法合并图层 - 如果按钮本身已有
transform（如旋转），再加扩散动画容易冲突；优先用纯scale，别混用translate
移动端点击时扩散效果不响应
iOS Safari 和部分安卓 WebView 对伪元素动画支持较弱，尤其在快速连续点击时，:hover 状态可能不触发或延迟。
解决办法不是加 will-change，而是换触发逻辑：
- 用
:active替代:hover实现点击反馈（.btn:active::before { transform: scale(1); }） - 对触摸设备加媒体查询：
@media (hover: none) and (pointer: coarse) { ... }，降级为简单背景色变化 - 确保按钮有
touch-action: manipulation，防止滚动干扰点击识别 - 不要依赖
transition-delay——移动端延迟不可控，动画应即时开始
inset、transform-origin、overflow 都得对齐，差一点，边缘就漏光。 
