边框被遮挡主因是父容器 overflow: hidden 裁剪或 margin 误用导致溢出；需检查 overflow 设置、改 margin 为 padding、排查层叠上下文干扰，并对 table 元素加 background-clip: padding-box。
边框被遮挡，通常不是边框本身出了问题，而是它所处的容器或父级元素“切掉”了它的显示区域。核心原因集中在两个地方：盒模型计算错误（比如 margin 误用）和 overflow 设置不当（比如 hidden 裁剪了内容）。只要定位准，改起来很快。
检查父容器是否设置了 overflow: hidden
这是最常见的情况。当父元素设置了 overflow: hidden，它会严格裁剪掉所有超出 content + padding 区域的内容——包括绝对定位的子元素、伪元素生成的边框、甚至 table 的 background 边框。
- 如果边框是用
::before/::after伪元素模拟的（如移动端 1px 方案），overflow: hidden会直接把伪元素“砍掉” - 如果是原生
border但出现在或
上，在 Firefox 中还可能因 background覆盖导致边框不可见，此时要加background-clip: padding-box- 临时验证方法：给父容器加
overflow: visible !important，看边框是否立刻出现确认是否用了 margin 而非 padding 来撑开空间
在某些布局中，开发者习惯用
margin推开相邻元素，但 margin 属于盒外部，不占容器内部空间；而 overflow 的裁剪边界只认 content + padding。如果边框靠 margin “挤出来”，它其实已经处于被裁剪区之外。- 把相关方向的
margin改成padding，边框就回到容器可视区域内 - 特别注意 flex / grid 容器中的子项，有时 margin 不触发重绘，但 padding 一定生效
排查定位元素与层叠上下文干扰
边框虽小，但如果它是某个
position: absolute元素的一部分，而该元素又被祖先的z-index或transform创建了新的层叠上下文，就可能整体被压在底层。立即学习“前端免费学习笔记（深入）”；
- 检查边框所在元素及其任意父级是否设置了
z-index、opacity 、transform、filter等会创建层叠上下文的属性 - 尝试给边框容器加
position: relative; z-index: 1;，快速测试是否受层叠上下文压制 - 若边框属于下拉菜单、弹窗等浮层，确保其父级没有
overflow: auto/scroll，否则浮层会被截断
补充：table 边框被 background 遮盖的专项处理
在 Firefox 中，
或 若同时设了 background和border，默认background会画到边框区域，把 border 盖住。- 解决方式很简单：加上
background-clip: padding-box; - 这样 background 就只铺在 padding 区内，border 才能正常显示
- 兼容性好，所有现代浏览器都支持
- 临时验证方法：给父容器加
