css3圆角廿

CSS3圆角廿是在元素的四个角中的内侧较小的那个角处产生的一个圆形曲线。这种圆角廿比较柔和，能够让设计更加美观。在CSS3中，我们可以使用border-radius属性来设置圆角，其中可以指定四个角的半径。

.rounded {
  border-radius: 20px 0 0 20px;
}

上面的代码表示左上角和左下角的半径为20px，右上角和右下角的半径为0px，即没有圆角。如果想让四个角都产生圆角，可以使用以下代码：

.rounded {
  border-radius: 20px;
}

上面的代码中，四个角的半径都为20px，所以四周产生了一个相同大小的圆角。需要注意的是，如果圆角的半径大于元素本身的高度或宽度的一半，圆角的效果会被自动调整为元素的高度或宽度的一半。

圆角廿还可以与CSS的伸缩性一起使用，比如可以将一个矩形元素变成一个圆形，如下代码：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

上面的代码中，由于宽度和高度相等，并且圆角半径为50%，所以一个矩形元素就变成了一个圆形元素。这种效果在制作网站菜单或图标时非常有用。