Javascript 如何修复JS中边界角的样式？

所以，我用一些算法创建了一个迷宫，在这个迷宫中，我有基本上是

div

元素的单元

最初，所有的

单元格都有边框，但当我继续执行该算法时，我会删除某些边框以实现迷宫。现在的问题是，这样做时，边界的各个角没有正确连接，这可以在下图中看到。

在这里，我删除了
单元格[0]
的
右
边框和
单元格[1]
的
左
边框，
并删除了
单元格[0]
的
底部
边框和
单元格[2]
的
顶部
边框

我只是想修复边界的一角，但我不能这样做，我真的非常感谢任何帮助


cells=document.querySelectorAll（“.cell”）；
//删除左右边框
单元格[0]。样式[“右边框”]=“无”；
单元格[1]。样式[“左边框”]=“无”；
//删除自上而下的边框
单元格[0]。样式[“边框底部”]=“无”；
单元格[2]。样式[“边框顶部”]=“无”
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.行{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.细胞{
高度：50px；
宽度：50px；
右边框：3倍纯黑；
底部边框：3倍纯黑；
}
.row.cell：类型的第一个{
左边框：3倍纯黑；
}
.row：类型.cell的第一个{
边框顶部：3件纯黑；
}

试验
我在没有边框的单元格中添加了一个伪元素。这对你有帮助吗


cells=document.querySelectorAll（“.cell”）；
//删除左右边框
单元格[0]。样式[“右边框”]=“无”；
单元格[1]。样式[“左边框”]=“无”；
//删除自上而下的边框
单元格[0]。样式[“边框底部”]=“无”；
单元格[2]。样式[“边框顶部”]=“无”
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.行{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.细胞{
高度：50px；
宽度：50px；
右边框：3倍纯黑；
底部边框：3倍纯黑；
}
.row.cell：类型的第一个{
左边框：3倍纯黑；
}
.row：类型.cell的第一个{
边框顶部：3件纯黑；
}
.第四单元{
位置：相对位置；
}
第四单元：之前{
内容：''；
显示：块；
位置：绝对位置；
顶部：-3px；左侧：-3px；
宽度：3倍；
高度：3倍；
背景色：黑色；
}

试验
使单元格重叠量与边框大小相同


cells=document.querySelectorAll（“.cell”）；
//删除左右边框
单元格[0]。样式[“右边框”]=“无”；
单元格[1]。样式[“左边框”]=“无”；
//删除自上而下的边框
单元格[0]。样式[“边框底部”]=“无”；
单元格[2]。样式[“边框顶部”]=“无”
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.行{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.细胞{
高度：50px；
宽度：50px；
左边距：-3px；
右边框：3倍纯黑；
底部边框：3倍纯黑；
}
.row.cell：类型的第一个{
左边框：3倍纯黑；
}
.row：类型.cell的第一个{
边框顶部：3件纯黑；
}

试验
添加填充物以填补间隙：

.cell:：before{
位置：绝对位置；
内容：“；
/*确保下面的所有值与边框大小和颜色匹配*/
左侧：-3px；底部：-3px；
宽度：3px；高度：3px；
底部边框：3倍纯黑；
}

还需要定位
.cell
以固定填充物：

.cell{
/* ... */
位置：相对位置；
}

补充说明
对于沙盒示例，只需更新此CSS，无需更改HTML或JS：

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.行{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.细胞{
高度：50px；
宽度：50px；
右边框：2倍纯黑；
底部边框：2件纯黑；
}
.row.cell：类型的第一个{
左边框：2倍纯黑；
}
.row：类型.cell的第一个{
边框顶部：2件纯黑；
}
.cell：：之前{
位置：绝对位置；
内容：“；
/*确保下面的所有值与边框大小和颜色匹配*/
左：-2px；下：-2px；
宽度：2px；高度：2px；
底部边框：2件纯黑；
}
.细胞{
位置：相对位置；
}
因此，在挠头将近10个小时后，我终于找到了解决办法

CSS的变化

在
单元格中添加名为
fix
的方法，每次调用
.show（）
，同时调用
.fix（）

单元格中的更改
类别

drawLoop中的更改

let drawLoop=setInterval（函数（）{
对于（设i=0；这可能会有帮助，但问题是，您使用的是第四个单元格，我在运行时的实际算法中无法访问该单元格，我需要一个修复程序，只使用更改边框的单元格。我希望您明白我的意思。您可以使用Javascript添加一个类，并使用单元格的宽度/高度+边框a然后从边界像素（这里是3px）反向移动到修复。这对你有帮助吗？我的完整代码，你能在这里插入你的修复吗，这将非常有帮助。这个fi
.bottomRightCorner::before {
    position: absolute;
    content: "";
    right: 0; bottom: 0;
    width: 2px; height: 2px;
    background: black;
}
.cell{
    position: relative;
}

fix(){
        if (!this.walls[1] && !this.walls[2]) cellElements[this.r*ncols + this.c].classList.add("bottomRightCorner");
    }

let drawLoop = setInterval(function(){
    for (let i=0; i<nrows; i++){
        for (let j=0; j<ncols; j++){
            grid[i*ncols + j].show();
        }
    }
    for (let i=0; i<nrows; i++){
        for (let j=0; j<ncols; j++){
            grid[i*ncols + j].fix();
        }
    }
    BacktrackingDFS();
},100);