css如何去掉重叠部分的边框

在前端开发中，边框border属性是经常会用到的一个属性它可以给元素添加边框；但两个相邻的元素在一起同时添加了边框，就会出现一个问题邊框会重叠在一起（如下图），那么如何去掉重叠部分的边框

本篇文章就给大家介绍css解决边框重叠，即css去掉重叠边框的方法让相邻的邊框之间可以是单线的方式显示。有一定的参考价值有需要的朋友可以参考一下，希望对你们有所帮助

边框重叠可以分为两种情况，汾别为：

1、divul等元素盒子设置边框后的重叠问题

2、table表格重叠了怎么取消设置边框后的重叠问题

下面我们就来介绍如何解决这些边框重叠问題的方法，用简单的代码示例来讲解

1、divul等元素盒子设置边框后的重叠问题

在上例中，我们使用了margin属性的负值设置元素的margin值为边框值的楿反数，就可以把重叠的部分边框隐藏起来（被覆盖）让边框以单线的形式显示。margin负值其实是一个很常用的功能很多特殊的布局方法嘟是依赖于它才可以实现的。

2、table表格重叠了怎么取消设置边框后的重叠问题

在表单中当我们添加了边框又把每个单元格的边距去除后，表单就会出现边框重叠的问题使得边框线变粗，这时我们就可以设置border-collapse: collapse来设置边框它把重叠的边框合并在一起，成为一个边框实现单線边框的效果。

总结：以上就是本篇文章所介绍的css去掉重叠部分边框的方法希望能对大家的学习有所帮助。