li {
border-radius: 10px;
/* 或者使用以下语法: */
/* border-top-left-radius: 10px; */
/* border-top-right-radius: 10px; */
/* border-bottom-left-radius: 10px; */
/* border-bottom-right-radius: 10px; */
background-color: #ccc;
margin-bottom: 10px;
padding: 10px;
}在上面的代码中，大家使用了border-radius属性来设置li元素的圆角，可以通过一个值来设置四个圆角的大小，也可以通过四个值来分别设置每个圆角的大小。
除了使用border-radius属性，大家也可以使用background-clip属性来设置元素的背景，从而实现圆角效果：
li {
background-color: #ccc;
margin-bottom: 10px;
padding: 10px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border-radius: 10px;
}上面的代码中，大家使用了background-clip属性来指定背景的绘制区域，在这里大家使用了padding-box，表示背景会在padding区域内绘制，而不会覆盖圆角区域。
无论是使用border-radius属性还是background-clip属性，都可以为li元素增加圆角效果，让页面看起来更加美观。