如何为CSS网格元素添加边框半径

Question

我想为五个紫色+灰色的框中的每一个添加border-radius，最好不要添加任何HTML样式，因为盒子内部div元素的排列可能会发生变化。请帮忙解决，我尝试过使用first-child和second-child选择器，但没有成功。以下是相关链接：https://codepen.io/siddagra/pen/vYBoJyM

.ExpandedSetPiece:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.ExpandedSetPiece:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

- Siddharth Agrawal

---

@LGSon，你是对的 ;) - G-Cyrillus

@ÖmürcanCengiz 我不知道是谁投了反对票，当一个答案有效时我看不出有什么理由去反对。当我投反对票时，我通常会解释原因，因为我知道这可能会让人感到沮丧，但是，嘿，这只是一个网站，并不会让你变得更好或更差 ;) - G-Cyrillus

谢谢你和@G-Cyr，我的声誉因此下降了。为什么？因为我回答正确并帮助了别人...谢谢大家，你们是最好的开发者。 - Ömürcan Cengiz

我得到了2个反对票？即使我回答正确？很抱歉我没有60000+的声望。无论如何，祝你好运。 - Ömürcan Cengiz

是时候清理一下注释部分了，不是吗？ - G-Cyrillus

@ÖmürcanCengiz 我只给了你赞，但在这里显示为0个赞，这可能只是stackoverflow计算赞的一个错误，希望它最终能够得到修复。 - Siddharth Agrawal

Answer 1

尝试这个：

.ExpandedSetPiece div:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.ExpandedSetPiece div:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

术语“子元素”有些误导性。如果您在 .ExpandedSetPiece 上使用 :first-child，它将意味着这些组中的第一个。

- Ömürcan Cengiz

---

删除div并在.ExpandedSetPiece和:last-child之间加上一个空格。 - Ömürcan Cengiz

@SiddharthAgrawal .ExpandedSetPiece {overflow:hidden} 运行良好，记住背景是设置在子元素上而不是盒子本身。 - G-Cyrillus

:first-child 应用于元素，仅选择该元素是其父元素的第一个子元素的元素。因此需要在它们之间添加空格。这就是伪选择器的工作方式。 - Ömürcan Cengiz

ExpandedArmor不是其父元素(ExpandedSetPiece)的第一个子元素吗？而最后一个ExpandedCell不是最后一个子元素吗？不确定为什么需要空格，但我想我从现在开始会添加em。 - Siddharth Agrawal

@LGSon 没有空格也不起作用，无论如何我会研究一下的。谢谢大家 :) !! - Siddharth Agrawal

Answer 2

只需将以下代码添加到您想要的半径处，--border-radius即可。

:root {
  --border-radius: 10px;
}

.ExpandedArmor {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.ExpandedCells:nth-child(3) {
  border-radius: 0 0 var(--border-radius) var(--border-radius);

- Ingo Andelhofs

---

那样确实有效，但由于可能会由于 JavaScript 添加更多元素，将其设置为 nth-child(3)并不是理想的选择，而将其设置为 last-child 甚至也不起作用。感谢您的帮助 :) - Siddharth Agrawal

Answer 3

首先为每个 Div 容器添加边框，然后再添加 border-radius。

.ExpandedSetPiece{
border: 1px solid black;
border-radius: 5px;}

希望这是你所需要的。

- Alex Ciu

---

这个不起作用。 - Ali Rehman