css3根据元素多少设置 border-radius,一行最多显示3个div盒子,最少显示一个div盒子,可以增减,会显示多行的情况,始终保持四个顶角部分的方块对应的角是圆角,其他为直角。
时间: 2024-09-23 07:09:09 浏览: 29
CSS3中的`border-radius`属性可以根据元素的数量动态调整每个盒子的圆角样式。为了实现这样的布局,你可以使用媒体查询、flexbox或者grid布局,同时结合`:nth-child()`伪类来控制边框半径。
首先,假设我们有一个包含三个或更多`div`的容器,我们可以给它们统一的基本样式,比如设置宽度和高度,以及默认的直角边框:
```css
.container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 容器间的间距 */
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
```
然后,我们可以根据每个盒子是第几个孩子来改变它的`border-radius`。对于每个偶数索引的元素(即第一个、第三个、第五个等),设置四个圆角,而对于奇数索引的元素(即第二个、第四个、第六个等),只保留顶部和底部的两个角为圆角:
```css
.box:nth-child(4n+1),
.box:nth-child(4n+2) {
border-radius: 0; /* 只有左上和右下角为圆角 */
}
.box:nth-child(4n+3),
.box:nth-child(4n) {
border-radius: 10px 10px 0 0; /* 上右和下左角为圆角 */
}
```
如果元素少于四个,那么前三个或更少的盒子将覆盖上述规则,保持一致的样式。