[分享]css中实现圆角效果的属性

CSS中提供了几种属性来实现圆角效果：

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; 

其中，border-radius是最常用的圆角属性。该属性可以指定四个角的圆角半径，也可以单独指定每个角的半径。

/* 四个角半径相同 */
div {
  border-radius: 10px;
}

/* 指定左上角和右下角的半径 */
div {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
} 

如果要实现一个元素的某个角是圆形，而其余角都是直角，可以使用border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius和border-top-right-radius属性来实现。

/* 左上角和右下角是圆形，其余角是直角 */
div {
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
} 

需要注意的是，有些浏览器可能会不支持border-radius属性（如IE8及以下版本）。为了兼容性，我们可以使用-webkit-border-radius和-moz-border-radius来分别指定webkit内核和Firefox内核所支持的圆角属性。

/* 支持webkit内核的浏览器 */
div {
  -webkit-border-radius: 10px;
}

/* 支持Firefox内核的浏览器 */
div {
  -moz-border-radius: 10px;
} 

综上所述，使用CSS中的border-radius、-webkit-border-radius和-moz-border-radius属性可以轻松实现圆角效果。