父 div 上的边框半径答案

【问题标题】：Border radius on parent div父 div 上的边框半径
【发布时间】：2021-07-10 22:16:05
【问题描述】：

在父 div 内有三个 div，display:flex。

我想为父 div 创建一个边框半径，但有些东西不起作用。

我的代码是：

<div style="height:50px;display:flex;width:500px;border-radius: 20px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

边界半径是不可见的。子容器可能有width:0% 或width:100%，因此应为父容器应用边框半径。

这怎么可能？

【问题讨论】：

添加溢出：隐藏到父级。
@BerkKurkcuoglu 非常感谢！
这能回答你的问题吗？ Forcing child to obey parent's curved borders in CSS
检查我的答案，它应该会有所帮助:)
这能回答你的问题吗？ CSS3 Border Radius Not Working for div element

标签： html css

【解决方案1】：

将overflow:hidden 添加到父 div

<div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow:hidden">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

【讨论】：

投反对票的原因如下：缺少内容。即使您的 anwser 可以解决 OP 的问题，这个 anwser 也可以包括。更多内容和格式。它至少应该包含一个有效的 sn-p 作为另一个答案，或者作为对之前给出的相同评论的赞成票。
即便如此，也可以使用更多内容，尤其是用于验证的 workign sn-p。在大多数情况下，1 个句子的回答者作为回答者没有帮助，而作为评论就足够了。
尽管@tacoshy 仍然是正确答案
@tacoshy 好的，我编辑了我的问题。但你需要问你以下问题：什么对你来说更重要？一个正确的答案，还是正确的格式？
它们都很重要。这不是什么更重要的问题。添加代码 sn-p 进行验证实际上需要 5 秒（顺便说一句。我为您添加了）。从字面上看，突出显示代码行而不是发布未格式化的代码行也需要 1 秒。你可以写一篇没有任何标点符号或格式的文章。文章可能包含真实信息，但是您肯定会同意文章即使不是不可读也难以阅读。因此，无论内容是否真实，它都是低质量的。

【解决方案2】：

试试这个：

<div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow: hidden">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

所以将overflow: hidden 添加到父级应该可以解决问题

【讨论】：

【解决方案3】：

只需将 overflow: hidden 添加到父 div 或将边框半径应用于第一个和最后一个子级。有时，某些元素对父级剪辑它们的反应不佳，而对直接剪辑的反应更好。以下是两种方法：

父级的边界半径：

body > div {
  border-radius: 20px;
  overflow: hidden;
}

<div style="height:50px;display:flex;width:500px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

儿童的边界半径：

body > div > div:first-child {
  border-radius: 20px 0 0 20px;
}
body > div > div:last-child {
  border-radius: 0 20px 20px 0;
}

<div style="height:50px;display:flex;width:500px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

【讨论】：