border-width仅支持绝对长度值（px、pt等）和thin/medium/thick/inherit四个关键字，不支持%、em等相对单位；响应式需借助媒体查询或CSS变量；简写border会覆盖独立border-width；box-sizing: border-box下border占用content空间；设为0时须配合border-style: none才彻底消失。
border-width 只接受长度值或关键字，不能用百分比
很多人试过 border-width: 50% 或 border-width: 1em，结果发现完全不生效——border-width 不支持相对单位（%、em、rem 等），只认绝对长度（px、pt、cm）和四个关键字：thin、medium、thick、inherit。浏览器对关键字的解析也不统一：thin 在 Chrome 是 1px，Firefox 可能是 2px，所以生产环境务必用具体数值。
-
border-width: 2px最稳妥，兼容所有现代浏览器 - 想响应式控制粗细？得靠媒体查询或 CSS 自定义属性 + JS 动态计算，不能直接靠
border-width响应 - 单边设置更常见：
border-top-width: 3px比全写border-width: 3px 1px 2px 1px更易维护
border-width 和 border 简写冲突时，后者会覆盖前者
如果你先写了 border-width: 4px，又在后面写了 border: 1px solid #000，那前面的 border-width 就彻底失效了——border 简写会重置所有子属性，包括宽度、样式、颜色。这不是 bug，是 CSS 层叠规则决定的。
- 避免混用：要么全用简写
border: 2px dashed red，要么全用独立属性border-width+border-style+border-color - 调试时注意 DevTools 里被划掉的属性：如果
border-width被划掉，大概率是后面有border或border-bottom类简写覆盖了它 - 想保留某一边的特殊宽度？用
border-left-width: 5px，它不会被border: 1px solid #000覆盖（但会被border-left: 1px solid #000覆盖）
box-sizing: border-box 下，border-width 会压缩 content 宽高
当元素设了 box-sizing: border-box（现在绝大多数项目都默认用了），border-width 就不是“额外加在盒子外面”的，而是从你声明的 width 和 height 里硬扣出来的。比如 width: 200px; border-width: 3px，实际内容区只剩 194px 宽（左右各减 3px）。
- 这个压缩是隐式的，容易导致布局错位，尤其在固定尺寸栅格或 flex 项中
- 如果需要保持内容区精确为 200px，又想要 3px 边框，就得把
width手动调大：width: 206px，或者改用box-sizing: content-box（但要小心全局重置影响） - 用
outline替代border可绕过这个问题（outline不占布局空间），但它不支持圆角、单边控制，且无法设置不同样式
border-width 为 0 时，border-style 必须显式设为 none 才真正消失
只写 border-width: 0 并不能让边框消失。因为 border-style 默认是 none，但一旦你之前设过 border-style: solid，再单独设 border-width: 0，边框依然存在（只是看不见）——这会影响某些浏览器的渲染行为，比如 outline-offset 计算或焦点样式偏移。
立即学习“前端免费学习笔记（深入）”；
- 最干净的做法是：
border: none，它同时清空 width、style、color - 如果必须分写，就配对使用：
border-width: 0; border-style: none - 特别注意表单控件（如
input、button）：它们常带 UA 样式，border-width: 0很可能被用户代理样式覆盖，必须加!important或提高选择器权重
