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

【问题标题】：css grid overflowing parent circle. How to force css grid to comply?css 网格溢出父圆。如何强制css网格遵守？
【发布时间】：2019-09-29 15:44:33
【问题描述】：

所以我们有一个 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:
}

【问题讨论】：

请向我们展示您的代码
如果不隐藏溢出，这是不可能的。无论视觉效果如何，所有 HTML 元素都是矩形。边界半径不会改变这一点。隐藏溢出是消除溢出部分的交互性的唯一方法。

标签： css css-grid

【解决方案1】：

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

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

查看这个小提琴的演示：https://jsfiddle.net/sqgkc962/

【讨论】：

非常感谢！！！！！！！我有一个类似的问题，即子元素溢出父容器。