css 网格溢出父圆。如何强制CSS网格遵守？

Question

所以我们有一个 div 块，我们应用了一些边框半径使其成为一个圆形。

接下来我们在这个 div 块中定义了一个 css 网格。但是这个 css 网格并不包含在圆圈内。

问题是这个网格仍然将 div 块视为矩形框模型。Div 块仅渲染为圆形，但其内部仍然是一个盒模型。

知道如何仅在圆圈内包含CSS网格吗？

我不想隐藏溢出。我希望网格尊重边界并留在内部。

HTML 代码：

<div> </div>

CSS代码：

div{
  height: 25vh;
  width: 25vh;
  border-radius: 50%;
  border: 2px solid black;
  background-color: black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr:
}

Answer 1

如果没有看到你的代码，很难诊断问题，但听起来像添加溢出：隐藏到你的圆形div可能会有所帮助：

.circle {
    border-radius: 50%;
    overflow: hidden;
}

请参阅此小提琴演示： https: //jsfiddle.net/sqgkc962/