css中创建圆角

CSS中可以使用border-radius属性来创建圆角。border-radius属性可以设置一个或多个值，分别表示四个角的圆角半径。如果设置一个值，那么四个角都将具有相同的圆角半径；如果设置两个值，第一个值表示左上角和右下角的圆角半径，第二个值表示右上角和左下角的圆角半径；如果设置四个值，分别表示左上角、右上角、右下角和左下角的圆角半径。

示例代码如下：

.rounded {
  border-radius: 10px;
}
.rounded-top {
  border-radius: 10px 10px 0 0;
}
.rounded-bottom {
  border-radius: 0 0 10px 10px;
}
.rounded-left {
  border-radius: 10px 0 0 10px;
}
.rounded-right {
  border-radius: 0 10px 10px 0;
}

在上面的示例代码中，`.rounded`类应用了一个相同的圆角半径，使元素的四个角都变为圆角。`.rounded-top`类设置了左上角和右上角为圆角，而`.rounded-bottom`类设置了左下角和右下角为圆角。`.rounded-left`类设置了左上角和左下角为圆角，而`.rounded-right`类设置了右上角和右下角为圆角。

除了使用具体的像素值来设置圆角半径，还可以使用百分比来表示相对于元素的宽度或高度的圆角半径。例如，`border-radius: 50%`会将元素变为一个圆形。

还可以使用`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius`和`border-bottom-left-radius`属性分别设置单独的圆角半径，这样可以更灵活地控制元素的圆角效果。

需要注意的是，`border-radius`属性在不同浏览器中的兼容性可能会有所差异，特别是在旧版本的浏览器中。为了确保圆角效果的一致性，可以使用厂商前缀来兼容不同的浏览器。

总结一下，CSS中的border-radius属性可以通过设置一个或多个值来创建圆角效果，可以使用像素值、百分比或者具体的角度值来表示圆角半径。通过灵活运用border-radius属性，可以为元素增加圆角效果，使页面更加美观。