css - 如何将我的子元素与其父元素的边框半径正确匹配

Question

我有一个容器，里面有一个子元素。容器的边界半径为 0.3rem。我的子元素也有边框。我希望我 child 的边框与 parent 的半径相同，但我似乎做不到。我的第一种方法是让子元素与父元素的半径 0.3rem 相匹配，但出于某种原因(即使两个元素上计算出的字体大小相同)，边框并没有完美对齐:

我的第二种方法是在父容器上使用通常建议的 overflow: hidden 样式。在子元素不匹配父元素的边框半径的情况下执行此操作确实会使整个按钮完美地遵循父容器的轮廓，但现在子元素的边框在 Angular 落里看起来“被切断”了:

有什么办法既可以跟随父容器的曲线，又可以在子元素上保持匹配的边界曲线？

Answer 1

内部元素的border-radius是外部元素的padding边缘半径，

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.

—CSS Backgrounds and Borders Module Level 3, § 5.2. Corner Shaping

div {
  border-radius: 1rem;
  border-width: 5px;
}

span {
  border-radius: 0 0 calc(1rem - 5px) calc(1rem - 5px);
  border-width: 3px;
}

/* the rest is positioning and colors */

div {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  border-color: grey;
  border-style: solid;
}

span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  border-color: #33f;
  border-style: solid;
}

<div><span></span></div>