设置li边角圆润且和下一个li之间有空隙
时间: 2024-04-08 07:35:27 浏览: 143
要设置列表项(li)的边角为圆润并且在每个列表项之间有空隙,您可以使用CSS的border-radius`属性和`margin`属性。通过为列表项添加合适的`border-radius`值和设置合适的`margin`值,您可以同时实现圆润边角和间隙效果。
以下是一些示例代码,演示如何设置列表项的圆润边角和间隙:
```css
.ui-listview li {
border-radius: 10px;
margin-bottom: 10px;
}
```
这将使所有列表项的边角都变为半径为10像素的圆润边角,并在每个列表项之间添加10像素的下边距。
如果您只想在相邻的列表项之间添加间隙,而不影响列表项的边角,您可以使用`margin-top`或`margin-bottom`来调整上下间隙。
例如,以下代码将在相邻的列表项之间添加10像素的下边距,而保持列表项的边角不变:
```css
.ui-listview li + li {
margin-top: 10px;
}
```
请根据您的具体需求调整`border-radius`值和`margin`值,以获得您想要的圆润边角和间隙效果。
阅读全文