border-width 会增加元素总尺寸、阻止 margin 塌陷、受缩放和设备像素比影响，且与 outline/box-shadow 布局行为不同；推荐统一用 box-sizing: border-box 并通过 CSS 自定义属性管理。
border-width 会直接增加元素的总宽度和高度
设置 border-width 后，元素在标准盒模型（box-sizing: content-box，默认值）下，其实际占用空间 = width + 左右 border-width + 左右 padding。高度同理。这意味着即使你写了 width: 200px，加上 border: 5px solid red，该元素在页面中实际占宽就是 210px（左右各 5px）。
常见错误现象：
– 容器内并排两个 width: 50% 的子元素，加了 border 后换行；
– Grid 或 Flex 容器中元素“撑出”父容器，出现横向滚动条；
– 表单输入框加边框后，与旁边按钮高度对不齐。
- 用
box-sizing: border-box可让width包含border和padding，这是最常用且推荐的修复方式 - 若必须用
content-box（如某些重置样式或遗留代码），需手动从width中减去border-width：例如width: calc(200px - 10px)（对应左右 border 共 10px） - 注意
border-width支持不同方向独立设置（border-left-width、border-top-width等），不对称边框会让尺寸计算更易出错
border-width 影响 margin 塌陷和相邻元素间距
边框本身不参与外边距合并（margin collapse），但它的存在会阻止父子或兄弟元素间的 margin 塌陷。比如父元素没有 border 或 padding，子元素的上 margin 会“穿透”到父元素外；一旦给父元素加了哪怕 border-width: 1px，塌陷就立即消失。
使用场景：
– 清除顶部 margin 塌陷时，比加 padding: 1px 更轻量；
– 在卡片类组件中，用 border-width: 0 切换边框显隐，可能意外触发/解除塌陷，导致布局跳动。
立即学习“前端免费学习笔记（深入）”；
- 检查是否发生 margin 塌陷，优先看父元素有无
border、padding或overflow非 visible -
border-width: 0和完全不写border效果不同：前者声明了边框存在（只是宽度为 0），仍可阻止塌陷；后者则不会 - 避免用
border-width: 0.5px试图“隐形边框”来防塌陷——部分设备不支持亚像素渲染，行为不可靠
border-width 在响应式设计中容易被忽略的缩放问题
当页面缩放（zoom）或启用系统级字体缩放时，border-width 的像素值是固定不变的，而文字、内边距等相对单位（em、rem）会随之变化。这会导致视觉比例失调：缩放后边框显得过粗或过细，破坏 UI 一致性。
