用 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 提升渲染稳定性