使用border-collapse处理表格边框合并，避免相邻单元格双线；通过单向边框或margin控制块级元素间重叠；用伪元素定位或box-shadow替代border防止冲突；利用z-index管理层叠顺序，避免重复边框。
在CSS中，边框叠加或合并效果常出现在多个元素相邻、表格单元格或使用伪元素添加边框时。若处理不当，容易出现边框重复、加粗、错位等问题。要避免多层边框冲突，关键在于合理控制边框的分布、合并方式以及层级关系。
使用 border-collapse 处理表格边框合并
当处理HTML表格时，浏览器默认会为每个单元格保留独立边框，导致双线效果。通过 border-collapse 属性可让相邻边框合并为一条：
• 设置 border-collapse: collapse; 可消除单元格之间的边框间隙，实现真正的边框合并。• 替代值 separate 保持默认分离状态，可通过 border-spacing 控制间距。
• 推荐在 table 元素上统一设置，确保视觉一致：
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
}相邻块级元素的边框重叠控制
当两个垂直排列的块级元素都设置了上下边框，它们相遇处会出现“双线”现象。可通过以下方式避免：
• 使用外边距（margin）负值抵消部分边框，但需谨慎计算尺寸。• 统一由其中一个元素承担分隔职责，例如只给每个元素的顶部或底部设边框。
• 更推荐的做法是选择一种方向统一绘制边框，如：
.item {
border-top: 1px solid #ddd;
}
.item:first-child {
border-top: none; /* 首项去边框 */
}这样每项之间仅有一条分隔线，避免叠加。
立即学习“前端免费学习笔记（深入）”；
伪元素边框与父元素冲突的规避
使用 ::before 或 ::after 添加装饰性边框时，可能与父容器原有边框重叠。解决方法包括：
• 精确控制伪元素的位置和尺寸，避免覆盖原始边框区域。• 利用 box-shadow 模拟边框，避免实际 border 占据空间或叠加：
.box {
position: relative;
}
.box::after {
content: '';
position: absolute;
top: 1px; right: 1px; bottom: 1px; left: 1px;
border: 1px dashed #000;
pointer-events: none;
}这样伪元素边框位于内容内侧，不会与外部 border 冲突。
边框层级与绘制顺序管理
当多个带边框的绝对定位元素堆叠时，可通过层叠上下文控制显示优先级：
• 使用 z-index 区分绘制顺序，确保重要边框不被遮挡。• 避免对同一区域重复设置 border，改用 outline 或 box-shadow 辅助提示。
• 注意 outline 不占据布局空间，适合用于聚焦或状态提示，不会与 border 冲突。
基本上就这些。关键是根据场景选择合适的策略：表格用 collapse，列表用单向边框，装饰用伪元素或阴影，避免盲目叠加。不复杂但容易忽略细节。
