为什么 child 元素角与 border-radius: inherit;与 parent 不一致

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

谁能解释一下为什么在这种情况下 child 元素的角周围有一个 space，为什么它们没有对齐？此外，只有在 parent.

上设置 border 属性时才会出现此问题

除了在 parent 上设置 overflow: hidden 之外，还有其他修复方法吗？

Answer 1

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

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

Updated CodePen

MDN - Border Radius

编辑：

如果您想否定 overflow 属性 - 如果您需要保持 parent 属性不变，我能想到的唯一其他方法是设置child 的 border-radius 与 parent 的半径比例相同 - 在本例中约为 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>

为什么 child 元素角与 border-radius: inherit;与 parent 不一致

Why child element corners with border-radius: inherit; doesn't align with parent's

css

border