1

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

这是显示我尝试的片段：https ://jsfiddle.net/5fgtL4so/5/

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

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

.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>

4

2 回答 2

1

虽然这个问题有点晚了，但通过设置父母的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>

于 2021-09-21T10:47:16.687 回答
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>

于 2020-07-06T15:38:15.943 回答