为什么子元素角具有边框半径：继承;与父母的不一致

Question

给定以下代码：

.HTML：

<div class="parent">
  <p class="child-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, distinctio? Pariatur voluptas officia placeat dolores, quam soluta laborum commodi voluptates cum quos illum labore eum nihil, perspiciatis nobis et reiciendis?</p>
</div>

.CSS：

* {
  box-sizing: border-box;
}
.parent {
  border: 7px solid #888;
  border-radius: 20px;
  background: lime;
}
.child-text {
  border-radius: inherit;
  background: linear-gradient(90deg, tomato, purple);
  margin: 0;
  padding: 10px;
  color: #fff;
}

结果：https://codepen.io/nikitahl/pen/PMYqVy

有人可以解释为什么在这种情况下子元素的角落周围有一个空间，为什么它们没有对齐？此外，仅当在父级上设置 border 属性时，才会出现此问题。

除了在父母上设置overflow: hidden之外，是否有其他解决方法？

Answer 1

只需将孩子的border设置为较低的 px 值即可解决此问题 - 或者正如我在下面所做的那样，您可以删除border-radius: inherit。

您的问题是您在两个元素上都应用了 20px border-radius，并且由于子元素小于父元素，这意味着border-radius看起来更苛刻，因为<p>标签更小 - 导致它们都未对齐。

更新的代码笔

MDN - 边界半径

编辑：

如果您想否定 overflow 属性 - 如果您需要保持父属性不变，我能想到的唯一其他方法是将子属性的border-radius设置为与父属性相同的半径比例 - 在这种情况下大约 12px，如下所示。

* {
  box-sizing: border-box;
}
.parent {
  border: 7px solid #888;
  border-radius: 20px;
  background: lime;
}
.child-text {
  border-radius: 12px;
  background: linear-gradient(90deg, tomato, purple);
  margin: 0;
  padding: 10px;
  color: #fff;
}

<div class="parent">
  <p class="child-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, distinctio? Pariatur voluptas officia placeat dolores, quam soluta laborum commodi voluptates cum quos illum labore eum nihil, perspiciatis nobis et reiciendis?</p>
</div>

Answer 2

您可以实现此添加 css 仅child-text .

* {
  box-sizing: border-box;
}
.child-text {
  border: 7px solid #888;
  border-radius: 20px;
  background: linear-gradient(90deg, tomato, purple);
  margin: 0;
  padding: 10px;
  color: #fff;
}

<div class="parent">
  <p class="child-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, distinctio? Pariatur voluptas officia placeat dolores, quam soluta laborum commodi voluptates cum quos illum labore eum nihil, perspiciatis nobis et reiciendis?</p>
</div>