border-width 变化会直接改变元素总宽高，因默认 box-sizing: content-box 将 border 计入外部尺寸；推荐全局设 box-sizing: border-box 或用透明边框占位。
border-width 变化会直接改变元素总宽高
当给同一个元素切换 border-style（比如从 none 切到 solid），或调整 border-width（比如从 0 改成 2px），即使 width/height 值没变，元素在页面中实际占位也会变大——因为默认的 box-sizing: content-box 把 border 算在盒模型外部。
常见表现：按钮 hover 时加边框后“抖动”，卡片展开时高度突变，表单控件聚焦后错位。
- border 的像素值会叠加进元素总尺寸（content + padding + border）
- 哪怕只改
border-color，只要border-width不为0，就已参与布局计算 - 用
outline替代border可避免尺寸变化，但它不占布局空间、不支持圆角、无法单独控制某一边
统一用 box-sizing: border-box 是最稳妥的解法
全局设置 box-sizing: border-box 后，所有指定的 width 和 height 都包含 content、padding 和 border，边界样式切换不再引发重排。
*, *::before, *::after {
box-sizing: border-box;
}
注意：该规则必须写在所有其他样式之前，否则可能被后续声明覆盖；若项目已存在大量 content-box 依赖逻辑，需逐个验证兼容性。
- IE8+ 完全支持
border-box，无需前缀 - 不要只对部分组件设
border-box，否则父子尺寸计算逻辑不一致，反而更难调试 - 使用 CSS 自定义属性控制边框时（如
--border: 1px solid #ccc），仍需确保父容器尺寸预留足够余量或启用border-box
需要保留 content-box 时，用透明边框占位
某些场景（如动画过渡、主题切换）要求 border 必须“出现/消失”，又不能破坏布局。此时可在初始状态预设 border: 2px solid transparent，再通过 border-color 控制显隐：
.btn {
border: 2px solid transparent;
transition: border-color 0.2s;
}
.btn:hover {
border-color: #007bff;
}
这样 border 始终存在，只是颜色不可见，尺寸恒定。
- 透明边框仍参与盒模型计算，所以能稳住布局
- 避免用
rgba(0,0,0,0)或hsla(...,0)，部分旧浏览器渲染不一致 - 若同时要控制
border-style（比如从dashed切到solid），也建议统一设为solid，仅调色值
检查工具链是否自动注入了 reset / normalize
很多脚手架（Create React App、Vite 模板、Tailwind 默认配置）已内置 box-sizing: border-box，但可能藏在 @layer base 或第三方 reset.css 里。如果发现 border 样式切换依然抖动，先确认：
- 开发者工具中选中元素，看 computed 栏的
box-sizing是否真为border-box - 检查是否有更高优先级的选择器把
box-sizing覆盖回content-box（比如某个div.card img规则） - Tailwind 用户注意：
border工具类（如border-2）本身不改box-sizing，它只设border-width和border-color
border 样式本身没有“无损切换”这种捷径，关键在于提前约定盒模型行为——要么锁死 border-box，要么用透明边框预留空间。漏掉其中一环，视觉跳动就很难根除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
