hover时边框“向内增长”的本质是通过box-sizing: border-box配合padding收缩与border扩张实现，即padding减少量等于border增加量，确保总尺寸不变且内容不位移。
hover时边框“向内增长”本质是box-sizing和padding/border切换问题
直接用 border-width 在 :hover 里增大，边框会向外撑开，内容位移——这不是“向内增长”，而是常见误解。真要视觉上“边框变厚但不挤内容”，必须让增大的边框吃掉原本的 padding 空间，核心靠 box-sizing: border-box + hover时动态调整 padding 和 border 的组合值。
用padding收缩抵消border扩张（最稳妥的纯CSS方案）
原理：初始状态留出足够 padding，hover时减小 padding、同时增加 border，总尺寸不变，视觉上就像边框“长进去了”。
示例（1px → 3px 边框，向内增长2px）：
.card {
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box; /* 关键！否则padding+border会叠加变宽 */
}
<p>.card:hover {
padding: 10px; /<em> 减少2px，腾出空间 </em>/
border-width: 3px; /<em> 增加2px，刚好填满 </em>/
}</p>
- 必须声明
box-sizing: border-box，否则默认content-box下 padding + border 会扩大元素总宽高 - padding 减少量 = border 增加量 × 2（上下或左右各算一次），比如竖直方向：原
padding-top: 12px→ 改为10px，对应border-top从1px→3px - 如果四边都动，统一按
padding: Xpx→padding: X - N，border-width: Ypx→Y + 2N
用outline替代border能绕过盒模型影响？不推荐
有人试 outline 因为它不占布局空间，hover时加 outline: 2px solid blue 确实不推内容。但它有硬伤：
-
outline不支持border-radius圆角（多数现代浏览器仍不支持outline-radius） - 无法单独控制某一边（
outline-top不存在） - 焦点样式冲突：键盘 Tab 进入时也会触发 outline，可能覆盖你自定义的 hover 效果
- 语义错误：outline 是为可访问性设计的焦点指示器，滥用会干扰屏幕阅读器逻辑
transition动画卡顿？检查是否触发了重排（reflow）
如果 hover 动画不流畅，大概率是改了影响布局的属性。以下写法会强制浏览器每帧重排：
- 错：用
margin或width/height配合 border 变化 → 触发重排 - 对：只动
padding、border、background-color、transform→ 多数情况仅重绘（repaint）或合成（composite） - 更稳：给
transition明确属性名，避免transition: all，例如：transition: padding 0.2s, border-width 0.2s
真正容易被忽略的是：哪怕用了 border-box，如果父容器宽度固定且子元素无 max-width，padding 缩小时可能导致内部文字换行，间接引发重排——这时得加 white-space: nowrap 或限制内容宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
