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>标签较小-导致它们都未对齐。

Updated CodePen

MDN - Border Radius

编辑：

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

* {
  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

您可以仅向child-text添加CSS。

* {
  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>

为什么子元素具有边界半径的角：继承；与父母的不符

2 个答案: