嘿，这个问题我之前帮不少人解决过，尤其是做tooltip这类组件的时候特别常见——当相邻元素都设置了border: 1px solid black，它们的边框会叠加在一起，看起来就变成了2px的效果，确实很影响视觉一致性。下面给你几个实用的解决方案，你可以根据自己的场景选择：

1. 用负margin抵消相邻边框 #

如果是横向排列的相邻元素（比如导航栏项、tooltip的主体和箭头），可以给后一个元素设置负的左margin，让它的边框和前一个元素的边框重叠，这样视觉上就只有1px：

.tooltip-item {
  border: 1px solid black;
}
.tooltip-item + .tooltip-item {
  margin-left: -1px;
}

这个方法简单直接，适合大多数横向排列的元素场景。

2. 只为相邻元素设置单侧边框 #

另一种思路是避免重复设置边框：比如给所有元素只设置右侧边框，然后给最后一个元素去掉右侧边框；或者针对tooltip这类组件，给主体和箭头分别设置不重复的边框，比如：

.tooltip-content {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}
.tooltip-arrow {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  /* 配合定位让箭头和主体精准对齐 */
}

这种方法适合组件内部的元素组合，能精准控制每侧的边框，从根源避免叠加。

3. 用box-shadow模拟边框 #

如果不想让边框占据布局空间（border会增加元素的尺寸），可以用box-shadow来模拟边框，因为阴影不会和相邻元素的阴影叠加出2px的效果：

.tooltip {
  box-shadow: 0 0 0 1px black;
  /* 替代border: 1px solid black */
}

这个方法的好处是不影响元素的盒模型计算，适合对布局精度要求高的场景。

4. 表格场景用border-collapse #

如果是表格元素出现边框叠加，直接使用CSS的border-collapse: collapse属性，表格的边框会自动合并成1px：

.table {
  border-collapse: collapse;
}
.table td {
  border: 1px solid black;
}

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