CSS边框默认在content-box下增加元素总尺寸，导致布局错位；推荐用box-sizing: border-box统一控制，使width/height包含边框和内边距；hover加边框需预留透明边框或负margin防跳动；box-shadow可纯视觉模拟边框；缩放时需配合固定总宽或calc()避免超限。
CSS边框默认会增加元素的总尺寸，因为它在标准盒模型（content-box）下被计算在 width 和 height 之外。比如设 width: 200px; border: 2px solid #000;，实际占用宽度就是 204px（内容区200px + 左右边框各2px）。这种“意外撑大”是布局错位、换行、溢出的常见原因。
用 box-sizing: border-box 统一控制尺寸
这是最推荐、最彻底的解法。它让 width 和 height 包含内容、内边距和边框，不再额外扩张。
- 全局设置可一劳永逸：
* { box-sizing: border-box; } - 对特定元素单独设置也有效：
.card { width: 300px; padding: 15px; border: 1px solid #ddd; box-sizing: border-box; }
此时它的总宽严格为300px，内部空间自动压缩 - 特别注意表单控件（
input、textarea）、content-box，建议显式重置
hover 加边框时避免跳动
鼠标悬停突然加边框，常导致位置偏移或文字抖动。核心思路是“预留空间”，不让尺寸突变：
- 初始状态就加透明边框：
a { border: 2px solid transparent; }
a:hover { border-color: #007bff; } - 或用负 margin 补偿（适合单侧边框）：
button:hover { border-left: 2px solid #007bff; margin-left: -2px; } - 不推荐用
outline替代——它不支持border-radius，且可能被遮挡
用 box-shadow 模拟边框效果
当只需要视觉边框、完全不想影响布局时，box-shadow 是纯装饰性方案：
立即学习“前端免费学习笔记（深入）”；
- 外边框效果：
box-shadow: 0 0 0 2px #007bff; - 内边框效果（带
inset）：box-shadow: inset 0 0 0 2px #007bff; - 阴影不影响盒模型尺寸，也不触发重排，性能更优
响应式缩放下的边框稳定性
浏览器缩放时，1px 边框可能被渲染为非整数像素（如 1.3px），叠加后导致总宽超标、子项换行。这时仅靠 box-sizing: border-box 不够，还需配合固定总宽约束：
- 给横向排列的项（如导航菜单项）明确设定包含边框的总宽：
nav li { width: 200px; box-sizing: border-box; border: 1px solid #eee; } - 避免用百分比宽度 + 固定边框组合（如
width: 25%; border: 1px），缩放后易超 100% - 必要时用
calc()扣除边框：width: calc(25% - 2px); /* 两边各1px边框 */
