Javascript 将不同单元格的边框与CSS网格合并（边框折叠行为）

我发现了很多类似的问题，比如这个问题，但我仍然没有找到解决问题的方法

我希望下面代码段的交叉线对齐。换言之，我想要的是b，不是a

     |
   --'          |
      .--     --+--
      |         |

    (a)        (b)

.电网{ 显示：网格； 网格间距：0； 网格模板柱：1fr 1fr； } .tl{ 网格柱：1； 网格行：1； 边框底部：5px纯黑； 右边框：5px纯黑； } .br{ 网格柱：2； 网格行：2； 边框顶部：5px纯黑； 左边框：5px纯黑； }

---

你可以考虑框阴影来近似它。一半的边框带有乌塞特阴影，另一半带有嵌入阴影

.电网{ 显示：网格； 网格间距：0； 网格模板柱：1fr 1fr； } .tl{ 网格柱：1； 网格行：1； 填充：0 2px 2px 0； 框阴影： 0px 2px黑色， 2px 0px黑色， 2件2件黑色， -2件套-2件套黑色镶嵌； } .br{ 网格柱：2； 网格行：2； 填充：2px0.2px； 框阴影： 0px-2px黑色， -2px 0px黑色， -2px-2px黑色， 2件2件黑色镶嵌； }

---

一个简单的解决方法是在br上使用负边距-请参阅下面的演示：

.电网{ 显示：网格； 网格间距：0； 网格模板柱：1fr 1fr； } .tl{ 网格柱：1； 网格行：1； 边框底部：5px纯黑； 右边框：5px纯黑； } .br{ 网格柱：2； 网格行：2； 边框顶部：5px纯黑； 左边框：5px纯黑； 左边距：-5px；/*已添加*/ 页边距顶部：-5px；/*已添加*/ }