父 div 上的边框半径

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或将边框半径应用于第一个和最后一个子级。 有时，某些元素对父级剪辑它们的反应不佳，而对直接剪辑的反应更好。 以下是这两种方法：

父级的边界半径：

 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>