折叠非表格上的虚线边框

Question

#grid {
    display: grid;
    grid: auto / repeat(3, 1fr);
    width: 300px;
    height: 100px;
}

#grid div {
    border: 1px dashed black;
    border-radius: 12px;
    height: 100%;
}

#grid div:nth-child(2) {
    margin-top: 20px;
}

#grid div:nth-child(3) {
    margin-top: 40px;
}

<div id="grid">
    <div></div>
    <div></div>
    <div></div>
</div>

我的 sn-p 的问题是会议边界重叠。如果我尝试通过应用负边距 -1px 来解决这个问题，它看起来没问题，但现在“合并”的边框在某些屏幕上显示为实线。

我想：

1. 合并会议边界
2. 避免合并的边框显示为实心

   所有这些都没有针对网格的特定子项。

Answer 1

您可以做的是为除最后一个孩子之外的所有孩子禁用右边框，这样每个孩子都只有一个不会合并的边框。

#grid {
    display: grid;
    grid: auto / repeat(3, 1fr);
    width: 300px;
    height: 100px;
}

#grid div {
    border: 1px dashed black;
    border-right: none;
    border-radius: 12px;
}
#grid div:last-child{
     border-right: 1px dashed black
   }

<div id="grid">
    <div></div>
    <div></div>
    <div></div>
</div>