javascript - 如何解决解决相邻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

也可试试边框合并属性：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

Answer 2

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

Answer 3

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

Answer 4

您可以使用 CSS 的 border-collapse 属性来解决相邻边框重合的问题。默认情况下，border-collapse 的值为 separate，这意味着每个元素的边框都是单独的。但是，如果您将 border-collapse 的值设置为 collapse，则相邻元素的边框会合并为一个单一的边框。

以下是使用 border-collapse 属性解决相邻边框重合问题的示例代码：

div {  border-collapse: collapse;}

在您的代码中，您可以将其应用于包含图像的 div 元素，这将使相邻图像的边框合并为一个单一的边框。