父级div的边框半径

Question

有三个

标签在父级

标签内，该父级

标签使用display:flex属性。

我想为父级

标签创建一个边框半径，但遇到问题。

我的代码如下：

<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%，因此应为父容器应用边框半径。

如何实现这一点？

- Rash J

---

在父元素中添加"overflow: hidden"。 - Berk Kurkcuoglu

@BerkKurkcuoglu 非常感谢！ - Rash J

这个回答解决了你的问题吗？如何在CSS中强制子元素遵循父元素的曲线边框？ - ATP

检查一下我的答案，它应该会帮助你的。 - Sowam

这个回答解决了你的问题吗？CSS3边框半径对div元素无效 - disinfor

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

- user6057915

---

因为以下原因被踩：缺少内容。尽管您的答案可以解决OP的问题，但是这个答案可能需要更多的内容和格式。它应该至少包含一个工作代码片段，就像其他答案一样，或者作为对之前给出的相同评论的点赞。 - tacoshy

即使如此，可能仍需要使用更多的内容，特别是用于验证的工作代码片段。在大多数情况下，一个句子的答案并不足以作为有用的答案，而应该作为评论提供。 - tacoshy

虽然 @tacoshy，但这仍然是正确的答案。 - user6057915

@tacoshy 好的，我已经编辑了我的问题。但你需要问问自己以下问题：对你来说什么更重要？正确的答案还是正确的格式？ - user6057915

它们都很重要。这不是什么更重要的问题。添加验证代码片段只需要5秒钟（顺便说一下，我已经为您添加了）。高亮显示代码行而不是发布未格式化的代码也只需要1秒钟。您可以编写一篇没有任何标点符号或格式的文章。该文章可能包含真实信息，但您肯定会同意，如果不是无法阅读，那么该文章将很难阅读。因此，无论内容是否正确，它都将是低质量的。 - tacoshy

Answer 2

只需要在父级 div 中添加 overflow: hidden，或者将 border-radius 应用于第一个和最后一个子元素。有时，某些元素对父元素剪切的反应不太好，直接剪切它们会更好。以下是两种方法：

在父级上使用 Border-radius：

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>

- user15246403

Answer 3

试试这个：

<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应该可以解决这个问题。

- Sowam