如何解决解决相邻border重合加粗问题？

Question

<div style={{position: 'relative'}}>
{images.map((a, i) => {
                return (
                  <div
                    onClick={() => setCurrentIndex(i)}
                    style={{
                      position: 'absolute',
                      left: a.x,
                      top: a.y,
                      width: a.w,
                      height: a.h,
                      border:'solid 1px #00ff00',
                    }}
                  >
                  </div>
                );
              })}
</div>

这里应该如何处理border重复加粗问题？

Answer 1

我一般外框用上+左，单元格用右+下。

Answer 2

利用margin负值应该没问题 margin:-1px

Answer 3

也可试试边框合并属性：border-collapse和border-spacing

border-collapse是一个用于指定表格的边框模型的属性，默认值是separate，表示每个单元格都有自己的边框，相邻单元格的边框会重叠。另一个值是collapse，相邻单元格的边框会合并为一个单一的边框，从而减少了边框的重复。

具体知识点参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse

border-spacing是一个用于指定相邻单元格之间的空间距离（边框间隔）的属性，在 border-collapse: separate; 情况下使用，可以控制相邻单元格边框之间的距离。

具体知识点参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-spacing