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/