[英]Border radius on parent div
There are three divs that are inside the parent div with display:flex
.在具有display:flex
的父 div 内有三个 div。
I want to create a border-radius for parent div but something doesn't work.我想为父 div 创建一个边框半径,但有些东西不起作用。
My code is:我的代码是:
<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>
The border-radius is invisible.边界半径是不可见的。 It is possible for the child to have width:0%
or width:100%
so the border-radius should be applied for the parent container.子级可能具有width:0%
或width:100%
,因此应将边框半径应用于父容器。
How is it possible to to that?怎么可能呢?
add overflow:hidden
to parent div添加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>
Try this:尝试这个:
<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>
so adding overflow: hidden
to the parent should fix the problem所以添加overflow: hidden
到父级应该可以解决问题
Just gotta add overflow: hidden
to the parent div OR apply the border-radius to the first and last children.只需添加overflow: hidden
到父 div或将边框半径应用于第一个和最后一个子级。 Sometimes, certain elements don't react nicely to the parent clipping them and respond better to being clipped directly.有时,某些元素对父级剪辑它们的反应不佳,而对直接剪辑的反应更好。 Here are both methods:以下是这两种方法:
Border-radius on parent:父级的边界半径:
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>
Border-radius on children:儿童的边框半径:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.