父 div 的边框半径

Question

父 div 内有 3 个 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%因此应将边框半径应用于父容器。

这怎么可能呢？

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>