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

Question

所以我们有一个 div block ，我们应用了一些 border-radius 使其成为一个圆。

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

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

知道如何只在圆圈内包含 css 网格吗？

我不想 overflow hidden 。我希望网格尊重边界并留在内部。

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

如果没有看到您的代码，就很难诊断问题，但听起来像是将 overflow: hidden 添加到您的 circle div 可能会有所帮助:

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

请参阅此 fiddle 进行演示:https://jsfiddle.net/sqgkc962/