如何隐藏重叠div的重叠区域边框？（下拉菜单开发场景）

这问题我之前做下拉菜单的时候也碰到过！核心思路就是利用隐藏其中一个元素的对应边框+负margin让两者紧密贴合，刚好你的两个div背景色完全一致，这样处理后效果会非常自然。

具体实现步骤 #

首先我们给元素加上类名方便样式控制，同时可以加个容器来统一管理下拉菜单的布局：

<div class="dropdown-wrapper">
  <div class="dropdown-header">菜单名称</div>
  <div class="dropdown-content">菜单列表</div>
</div>

然后编写CSS样式：

/* 可选：如果希望菜单整体宽度统一，给容器设置宽度 */
.dropdown-wrapper {
  width: 150px;
}

.dropdown-header {
  width: 100px;
  height: 20px;
  background-color: #5475b1;
  border: 2px solid;
  /* 关键：移除标题的底部边框，避免重叠区域出现双层边框 */
  border-bottom: none;
}

.dropdown-content {
  width: 150px;
  height: 200px;
  background-color: #5475b1;
  border: 2px solid;
  /* 关键：用负margin让列表向上移动2px（等于边框宽度），和标题底部无缝贴合 */
  margin-top: -2px;
}

原理说明 #

• 我们把菜单标题的底部边框去掉，这样它和列表重叠的区域本身就没有边框
• 通过margin-top: -2px让菜单列表向上偏移，刚好和标题的底部对齐，列表的顶部边框会和标题的底部完美衔接，再加上两者背景色一致，视觉上就完全看不到重叠区域的边框了

这种方法兼容性好，代码也简洁，完全适配你做下拉菜单的场景。如果之后需要调整边框宽度，只需要同步修改border-width和负margin的数值就可以了。

内容的提问来源于stack exchange，提问作者Sagar