:hover边框失效主因是border增加布局尺寸导致重排；推荐用outline（无偏移但无圆角）、box-shadow（灵活兼容好，支持圆角/单边/内边框）或伪元素（精准控制形状动画）。
导航栏 :hover 边框失效的常见原因
直接给 <a> 或 <li> 加 border 并设置 :hover 却没反应？大概率是边框占空间导致布局抖动，浏览器默认把 border 渲染为「额外尺寸」，而导航项通常用 display: inline-block 或 flex 布局，边框一加就撑开位置、触发重排，甚至被父容器裁剪或隐藏。
用 outline 替代 border 实现无偏移悬浮边框
outline 不参与盒模型计算，不会影响布局，适合纯视觉强调。但要注意它不支持圆角、不能只设单边、默认会绕整个元素（含内边距和边框），且部分浏览器对 outline-offset 支持不一。
- 给导航链接加
outline: 2px solid #007bff，再配outline-offset: 2px微调距离 - 必须移除原有
border，否则outline和border叠加可能更乱 - 若需圆角效果，
outline无法实现，得换方案
用 box-shadow 模拟悬浮边框（推荐）
这是最灵活、兼容性好（IE10+）、可控制方向/圆角/颜色/模糊度的方式。本质是投射一层「影子」，不占布局空间，还能做出内边框、双线、渐变边等效果。
nav a:hover {
box-shadow: 0 0 0 2px #007bff;
border-radius: 4px;
}
- 要单边效果？改
box-shadow: 0 2px 0 0 #007bff（仅下边） - 想模拟「内边框」？用
inset：box-shadow: inset 0 0 0 2px #007bff - 多个阴影叠加？逗号分隔，比如外轮廓 + 内高光：
box-shadow: 0 0 0 2px #007bff, 0 0 4px 3px rgba(0,123,255,0.3) - 注意：如果导航项本身有
overflow: hidden，box-shadow可能被裁掉，需检查父级样式
用伪元素 ::after 精确控制悬浮边框形状
当需要不规则边框（如仅底部横线、带箭头的指示边框、斜角切割），伪元素是最可控的方式。它完全独立于原元素盒模型，可任意定位、缩放、旋转。
立即学习“前端免费学习笔记（深入）”；
nav a {
position: relative;
}
nav a:hover::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 3px;
background: #007bff;
border-radius: 2px;
}
- 伪元素默认不占文档流，
position: absolute是必须的 - 若导航项宽度不固定，用
width: 100%+left: 0更稳妥 - 动画过渡需加在伪元素上：
transition: all 0.2s ease要写在nav a::after规则里，不能只写在:hover中 - Firefox 对伪元素
transition支持稍弱，建议加will-change: transform提升渲染稳定性
box-shadow 和伪元素是目前最稳的选择。 
