css4样式圆角变圆形

CSS4样式中新增了一个可以将元素的圆角变成圆形的属性——border-radius: 50%;

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

上述代码会把元素的圆角变成一个圆形。如果元素不是正方形，那么将会把它的宽度和高度设置为相等。

border-radius属性本来就可以实现圆角的效果，但是它只能设置椭圆形的圆角，不能实现圆形的效果。而使用border-radius:50%则可以实现圆形的效果。

该属性在制作一些圆形图标和圆形头像上非常实用。