在非表上崩溃边框。
在非表上崩溃边框。
提问于 2022-11-24 12:11:53
#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>
我的代码片段的问题是边界重叠。如果我试图通过应用负边距-1px来解决这个问题，它看起来还可以，但是现在“合并”的边框在某些屏幕上显示为实心。
我想：
- 合并会议边界
- 避免合并边界显示为坚实的
所有这些都没有针对特定的网格子节点。
回答 1
Stack Overflow用户
发布于 2022-11-24 12:16:51
您可以做的是禁用所有儿童的正确边框，除了最后一个，这样每一个将只有一个边框将不会合并。
#grid {
display: grid;
grid: auto / repeat(3, 1fr);
width: 300px;
height: 100px;
}
#grid div {
border: 1px dashed black;
border-radius: 12px;
height: 100%;
margin-right: -1px;
}
#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>
编辑：
检查这是否如您所期望的那样有效。
在应用margin-right: -1px之后，它可以工作，边框甚至看起来都不牢固
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74560605
复制相关文章
相似问题
腾讯云开发者
