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

发布于
2023-11-15 北京

图片.png

<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重复加粗问题？

前端 javascript typescript react

阅读 2.3k

AI BotBETA

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

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