border: none 彻底移除边框渲染路径，而 border: 0 仅设宽度为0但保留 solid 样式，可能导致重绘、outline偏移或 subpixel 抖动；判断时应查 bordertopstyle 而非 bordertopwidth。
border: 0 和 border: none 都不占空间，但渲染行为有差异
当 border 设为 0 或 none 时，边框本身不占用布局空间（即不会影响 box-sizing 下的 width/height 计算，也不撑开容器），这是确定的。但关键区别在于：浏览器是否「绘制」这条边框——哪怕它宽为 0。
实测发现：border: 0 会保留边框盒（border box）结构，部分浏览器（如旧版 Safari、某些 Android WebView）仍可能触发重绘逻辑或影响 outline 的定位；而 border: none 是彻底移除边框渲染路径，更干净。
-
border: 0等价于border-width: 0，但border-style仍为默认值（通常是solid），只是宽度为 0 -
border: none同时置空border-style，且宽度、颜色均被忽略，CSS 引擎跳过边框绘制阶段 - 在
box-shadow或transform附近做像素级对齐时，border: 0偶尔引发 subpixel 渲染抖动，border: none更稳定
检查边框是否实际绘制：用 getComputedStyle 和 DevTools 双验证
不能只看元素尺寸，要确认边框是否进入渲染管线。最直接的方式是调用 window.getComputedStyle(el).borderTopWidth，但它返回的是计算后值（"0px"），无法区分 0 和 none。
真正有效的判断方式是查 borderTopStyle：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.my-box');
console.log(getComputedStyle(el).borderTopStyle); // "none" 或 "solid"同时打开浏览器 DevTools → Elements → Styles 面板，展开 border 展开项，观察是否显示「border: none」或「border-width: 0px」——后者旁通常带小箭头可展开看到 border-style: solid，这就是隐患点。
border 为零时仍影响 layout 的常见误判场景
表面上 border: 0 不占位，但以下情况会让开发者误以为「边框还在占空间」：
- 父容器设置了
overflow: hidden，而子元素有transform: translateZ(0)或will-change: transform，导致建立新层叠上下文，border 盒的边界参与裁剪计算（即使 width 为 0） - 使用了
box-sizing: border-box但同时写了padding+border，此时border: 0虽不占空间，但若之前设过border: 1px solid #000再改回来，浏览器可能未及时更新 layout tree 中的 border box 尺寸缓存（强制el.offsetHeight读取可触发重排） - CSS 自定义属性中写成
--border: 0，但在规则里用了border: var(--border) solid #000—— 此时实际解析为border: 0 solid #000，等价于border: none，但某些旧引擎会报 warning 并 fallback
推荐写法：统一用 border: none，避免隐式 style 继承干扰
除非你需要动态切换边框宽高（比如 hover 时从 0→2px），否则不要用 border-width: 0 单独控制。理由很实在：
-
border: none在所有浏览器中语义明确，无兼容性歧义 - 当元素继承了来自父级的
border-style（比如某个 UI 库全局设了* { border-style: solid }），border-width: 0仍受该 style 影响，而border: none优先级更高、直接切断 - 在 CSS-in-JS 或原子化工具（如 Tailwind）中，
border-none是原子类，border-0往往只是缩写，底层仍可能生成border-width: 0
真正要注意的不是「占不占位」，而是「有没有留下 style 隐患」——边框虽不可见，但它的 style 属性可能还在 DOM 样式树里游荡，等着在某个 resize 或动画帧里突然生效。
