直接transition border-width失效因浏览器不触发重排动画且引发布局跳动；::before伪元素通过scale()实现无侵入式边框扩张，需设position: relative、transform-origin及显式transition属性。
为什么直接 transition border-width 会失效
直接给 border 设置 transition: border 0.3s 并不能实现“边框扩张”动画，因为 border-width 从 0 变到 2px 时，浏览器默认不触发重排动画（尤其当初始边框为 none 或 0）。更关键的是：边框出现会挤占内容空间，导致布局跳动。
::before 元素如何模拟“无侵入式”边框扩张
用 ::before 创建一个绝对定位的伪元素，覆盖在元素外围，通过控制它的 width/height 和 transform: scale() 实现视觉上的“向外扩张”，且不改变原始元素盒模型。
- 伪元素初始设为
scale(0)，透明，pointer-events: none - 悬停时过渡到
scale(1)，同时用transform-origin: center确保从中心向外展开 - 边框样式写在伪元素上（如
border: 2px solid #007bff），避免影响主元素 - 必须给宿主元素设置
position: relative，否则::before无法精确定位
示例代码：
.btn {
position: relative;
padding: 10px 20px;
}
.btn::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid transparent;
border-radius: 4px;
transform: scale(0);
transform-origin: center;
transition: transform 0.3s ease, border-color 0.3s ease;
pointer-events: none;
}
.btn:hover::before {
transform: scale(1);
border-color: #007bff;
}
transition 属性必须显式列出可动画属性
不要写 transition: all 0.3s —— 它会让所有变化（包括 color、opacity 等非预期属性）都参与过渡，可能掩盖真实问题或引发性能抖动。
立即学习“前端免费学习笔记（深入）”；
- 只写真正要过渡的属性：
transform和border-color是安全且高性能的 -
border-width不推荐过渡，它会触发 layout；border-color则是纯绘制层变化 - 如果需要颜色渐变+尺寸变化，两个属性必须同时出现在
transition声明中，否则后者不会生效
移动端点击穿透与 hover 适配问题
在 iOS Safari 和部分安卓浏览器中，:hover 在触摸设备上行为不可靠：首次点击可能触发 hover，第二次才真正点击，甚至不触发。
- 若按钮有真实交互（如跳转或提交），务必同时加
:active样式，并确保::before在:active下也有对应状态（例如缩放微调） - 更稳妥的做法是用 JavaScript 监听
touchstart添加临时 class，避免纯 CSS 悬停在移动端失效 - 伪元素的
pointer-events: none必须保留，否则会拦截点击事件
真正麻烦的不是怎么写动画，而是让这个动画在各种设备上既平滑又不抢点击、不闪跳、不重绘布局 —— 这些细节藏在 transform-origin、pointer-events 和过渡属性粒度里。
