[分享]css中如何把div变圆

在CSS中，我们可以使用border-radius属性来把div变成圆形。

 div{
        border-radius:50%; /*50%表示div变成圆形时，直径等于元素宽度的一半*/
    } 

这里的border-radius属性值可以是一个数值，也可以是一个/两个/多个数值组成的属性值，它们分别表示div四个角落的圆角程度。

 div{
        border-radius: 10px; /*四个角的圆角都是10px*/
    }
    div{
        border-radius: 5px 20px; /*左上角和右下角圆角是5px，右上角和左下角圆角是20px*/
    }
    div{
        border-radius: 20px 10px 30px 5px; /*左上角20px，右上角10px，右下角30px，左下角5px*/
    } 

如果你希望div只变成半圆形，或显示出波浪线形的边框，也可以使用border-radius属性。

 div{
        border-top-left-radius: 50%; /*左上角圆50%*/
        border-top-right-radius: 50%; /*右上角圆50%*/
        border-bottom-left-radius: 0; /*左下角不圆*/
        border-bottom-right-radius: 0; /*右下角不圆*/
    }
    div{
        border-radius: 10px / 50%; /*水平方向10px，垂直方向50%*/
    } 

使用border-radius属性，可以让div变成圆形、椭圆形、半圆形、波浪线形等各种形状，让页面更具创意和美观。