伪元素模拟边框环是唯一可靠方案：用::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，而是控制伪元素的渲染范围：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 给伪元素加 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 都得对齐，差一点，边缘就漏光。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！