不能直接用 border 动画实现内向外扩散，因为 border 无坐标原点和起始位置属性，scale() 作用于整个元素而非边框本身；需用伪元素 + transform-origin: center 模拟边框环并缩放。
为什么不能直接用 border 动画实现内向外扩散
直接对 border 使用 transform: scale() 或 @keyframes 想让它“从中心弹出”，浏览器根本不认——border 本身没有坐标原点概念，也没有可动画的“起始位置”属性。你写的 scale(0) 对 border 无效，它只会缩放整个元素（包括内容），不是边框自己扩散。
常见错误现象：border: 2px solid #333 + transform: scale(0) hover 时按钮整体变小，边框没“动”；或者用 border-width: 0 → 2px 过渡，结果是边框粗细突变，毫无扩散感。
-
border不支持transform-origin独立控制其锚点 -
border-width可过渡，但只能线性增粗，无法模拟“从点发散”的视觉逻辑 - 伪元素
::before若设border，再scale，会连带影响自身尺寸计算，导致定位漂移
用伪元素 + transform-origin 实现真·中心扩散
核心是放弃操作 border 本身，改用一个绝对定位的伪元素模拟“边框环”，把它当成独立图形来缩放。
关键点：必须把伪元素的 transform-origin 显式设为 center，否则默认是左上角，缩放会偏移。
立即学习“前端免费学习笔记（深入）”；
- 按钮本体加
position: relative和overflow: hidden -
::before设为content: ""、position: absolute、inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0） - 给伪元素设
border: 2px solid #4ecdc4，但初始transform: scale(0) - hover 时设
transform: scale(1)，并配transform-origin: center - 加
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)—— 这个缓动比ease-out更有“弹出”感
示例片段：
.btn {
position: relative;
overflow: hidden;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #4ecdc4;
transform: scale(0);
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover::before {
transform: scale(1);
}
圆角按钮下边框扩散失真怎么修
当按钮有 border-radius: 8px，伪元素边框环缩放时，四个角会先“撑开”，导致边缘锯齿或短暂露白——这不是 bug，是 border 渲染在圆角裁剪区外的自然表现。
解决方式不是调大 border-radius，而是让伪元素主动适配裁剪边界：
- 伪元素加
border-radius: inherit，继承按钮的圆角值 - 必须加
box-sizing: border-box，否则inset: 0+border会让伪元素实际超出按钮范围 - 若仍有轻微露白，把伪元素
inset改为inset: -2px（数值 = border 宽度），让它略微溢出再被父容器overflow: hidden裁掉 - Safari 下需额外加
-webkit-mask-image: radial-gradient(circle, black 100%, transparent 100%)强制圆角遮罩（仅必要时）
要支持点击反馈，得叠加 ripple 层级
如果按钮既要 hover 扩散边框，又要 click 波纹效果，两套动画会打架：伪元素 ::before 做边框，::after 就得留给 ripple，且层级必须理清。
-
::before（边框）z-index 设为 1，::after（ripple）设为 2，按钮文字设为 3 - ripple 的
transform-origin必须动态计算点击坐标，不能写死center，否则和边框扩散错位 - 避免同时触发：边框用
:hover，ripple 用 JS 监听click，两者互不干扰 - 注意：ripple 元素的
border-radius: 50%和伪元素边框的圆角值无关，它是独立圆形，不受按钮圆角影响
真正容易被忽略的是：扩散动画的时长（0.35s）和 ripple 动画（0.6s）不能一样，否则视觉节奏会糊成一团。差值至少留 0.15s，人眼才分得清“边框张开”和“涟漪荡开”是两个动作。
