Question

在带有 display:flex 的父 div 中有三个 div。

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

这怎么可能？

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>

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

Answer 3

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

父级的边界半径：

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>

父 div 上的边框半径

3 个答案: