css3介绍和圆角效果实现

CSS3是CSS的升级版，它新增了很多的属性和特性，能够实现更加丰富多彩的效果。

@H_502_4@

其中，圆角效果是CSS3中的一个非常实用的特性，可以在网页设计中给元素增加一些圆润的美感。

/* 圆角效果实现 */
.border-radius {
  border-radius: 10px;   /* 设置四个角的圆角半径为10px */
}

/* 使用不同的值实现不同的圆角效果 */
.border-radius {
  border-top-left-radius: 20px;   /* 左上角圆角半径为20px */
  border-bottom-right-radius: 30px;   /* 右下角圆角半径为30px */
  border-top-right-radius: 5px;   /* 右上角圆角半径为5px */
  border-bottom-left-radius: 15px;   /* 左下角圆角半径为15px */
}

/* 可以设置不同的圆角半径 */
.border-radius {
  border-radius: 10px 20px 30px 40px;   /* 上左 下右四个角依次为10px、20px、30px、40px */
}