元素hover边框抖动因重排，应默认设transparent边框占位并transition颜色；outline不触发重排但无圆角且兼容性差；box-shadow可模拟单边边框但可能遮挡元素；移动端:hover不可靠需用@media(hover:hover)或js替代。
hover 时用 border 实现边框出现，但元素会抖动
直接写 border: 2px solid #007bff; 在 hover 状态下，而默认状态没边框，浏览器会重排（reflow）——因为边框宽度从 0 变成 2px，内容区实际尺寸收缩，导致布局跳动。
解决办法是：默认状态就预留边框空间，用透明边框占位：
.box {
border: 2px solid transparent; /* 占位不显形 */
transition: border-color 0.2s;
}
.box:hover {
border-color: #007bff;
}
- 透明边框不会影响视觉，但保持盒模型尺寸稳定
- 只改
border-color，不触发布局计算，性能更好 - 务必加
transition，否则颜色切换生硬
想让边框「从无到有」又不抖动，用 outline 替代 border
outline 不参与文档流，添加或删除不会引起重排，适合纯装饰性“浮现”效果。
.btn {
outline: none; /* 先清除默认焦点 outline */
}
.btn:hover {
outline: 2px solid #28a745;
outline-offset: 2px; /* 可选：控制 outline 离边界的距离 */
}
-
outline无法设置圆角（border-radius对它无效） - 部分老版本 IE 不支持
outline-offset - 不能像
border那样分方向设置（如只加 bottom 边框）
需要不同方向边框渐显？用 box-shadow 模拟
比如只让底部边框滑入，或四边分别动画——border 和 outline 都不支持单边独立过渡，这时用 box-shadow 更灵活：
.card {
box-shadow: 0 0 0 0 transparent;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 2px 0 0 #dc3545; /* 模拟下边框 */
}
- 数值顺序：
h-offset v-offset blur spread color，设blur=0、spread>0就能做出实线感 - 要模拟左边框：用
-2px 0 0 0 #007bff - 注意：
box-shadow是绘制在元素上方的，可能遮挡相邻元素
移动端 hover 失效？别依赖 :hover 本身
iOS Safari 和多数安卓浏览器中，:hover 仅在模拟鼠标指针存在时才触发（比如 iPad 连了妙控板），纯触摸操作默认不响应。真机上常表现为“悬停无效”。
- 不要把关键交互（如菜单展开、按钮激活）只绑在
:hover上 - 可配合
@media (hover: hover)做渐进增强：
@media (hover: hover) {
.nav-item:hover .dropdown {
display: block;
}
}
touchstart + click 双事件，或改用点击展开逻辑实际项目里最常踩的坑，不是写不出效果，而是忘了透明边框占位、忘了移动端无 hover、或者用 box-shadow 时 spread 值太小导致阴影虚化看不出边框感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
