具有border-radius的元素内部具有border-radius的元素不一致答案

【问题标题】：Element with border-radius inside element with border-radius is not consistent具有border-radius的元素内部具有border-radius的元素不一致
【发布时间】：2020-10-26 18:25:26
【问题描述】：

我的布局很可能无法更改。我需要在另一个具有边框半径的元素内的元素上使用边框半径。 目的是填补空白。问题是子元素的角落溢出，但我不能在这个项目中使用overlow:hidden，这就是我尝试使用border-radius的原因。

这是一个 sn-p 来展示我的尝试：https://jsfiddle.net/5fgtL4so/5/

问题是 30px 的内边框半径与外边框半径没有相同的曲线。我不想硬编码它，因为它必须是响应式的。正如您在 sn-p 上看到的那样，我还尝试使用宽度和边距，但这似乎不是正确的方法，因为我仍然有很小的误差。

知道如何解决这个问题吗？

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
}

.child {
  border: 3px solid tomato;
  padding:10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
  /* bellow solution is not perfect. There is still tiny white space around innter corners, it's a bit more visible on my project */
  /*
  margin-left: -3px;
  width: calc(100% + 6px);
  */
}

<div class="parent">
  <div class="child">
  </div>
</div>

【问题讨论】：

左边距有什么问题：-3px;宽度：计算（100% + 6px）；边距顶部：-3px；高度：103px； ?
@VXp 我没有想到margin-top，即使我非常接近，因为我使用了margin-left。但我认为一定有更好的方法，因为它听起来很老套，不确定。
没错，你很接近，这就是为什么它有点好笑。 :) 另一种方法是将孩子的边框半径减小到 23 像素（30 像素 - 组合边框宽度 + 1）。
真的。我不知道您是如何进行计算的，但是 30px 父级和 23px 子级没有我刚刚检查过的相同边界曲线，所以我认为它不正确。大约 27px 听起来不错，但同样，我不知道获得此结果的逻辑方法。
组合含义 3px + 3px，概率。我应该使用总结。对我来说 23px 看起来还不错，但是是的，这取决于...

标签： html css border border-radius

【解决方案1】：

您可以使用inset box-shadow 代替border。

.parent {
  /*border: 3px solid tomato;*/
  background-color: white;
  height: 200px;
  border-radius: 30px;
  box-shadow: inset 0px 0px 0 3px tomato;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

此外，如果您也添加margin-top: -3px，您的解决方案也有效。

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
  margin-left: -3px;
  margin-top: -3px;
  width: calc(100% + 6px);
}

<div class="parent">
  <div class="child">
  </div>
</div>

【讨论】：

那么高度需要为103px。
我怎么没想到！在我的情况下，这确实是一个解决方案（固定高度适用于 sn-p，但它实际上基于内容高度，所以不是什么大问题）。我也发现了顶部的边距修复，但它看起来很hacky。

【解决方案2】：

虽然这个问题有点晚了，但通过设置父母的overflow: hidden 并从孩子身上完全移除半径，你可以实现你所需要的。

.parent {
  border: 3px solid tomato;
  background-color: white;
  height: 200px;
  border-radius: 30px;
  overflow: hidden;
}

.child {
  border: 3px solid tomato;
  padding:10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

【讨论】：