将圆角添加到一组div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将圆角添加到一组div相关的知识，希望对你有一定的参考价值。
我有一个简单的水平div和一些有色的孩子：
.bar {
display: flex;
height: 90px;
border-radius: 20px;
}<div class="bar">
<div class="segment" style="width: 150px; background: red;"></div>
<div class="segment" style="width: 100px; background: blue;"></div>
<div class="segment" style="width: 5px; background: green;"></div>
</div>我想尝试使.bar div有圆角但看不到明显的方法去做。我知道这样：
.segment {
&.first-child {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
&.last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
}
但是，如果其中一个.segment太小，那就行不通了，就像我的代码片段中的情况一样。
答案
为什么不将边框半径放在条形上并隐藏溢出：
.bar {
display: inline-flex; /* make inline so it is only as wide as children */
height: 90px;
border-radius: 25px;
overflow: hidden; /* add this */
}<div class="bar">
<div class="segment" style="width: 150px; background: red;"></div>
<div class="segment" style="width: 100px; background: blue;"></div>
<div class="segment" style="width: 5px; background: green;"></div>
</div>以上是关于将圆角添加到一组div的主要内容，如果未能解决你的问题，请参考以下文章