css中使div的轮廓为圆形

CSS中可以使用border-radius属性来将一个矩形的边角圆角化，从而使其变为一个圆形。使用该属性，我们可以轻松地将一个div元素变成圆形。

div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f00;
}

上述代码中，我们首先定义了一个宽高为100px的div元素，并将border-radius属性设置为50%，这样其边角就会自动变成圆角，从而让整个元素成为了一个圆形。另外，为了更加直观地看到圆形效果，我们还给了该div元素一个红色的背景色。

当然，如果你想要创建一个椭圆形，只需要将圆角的横向和纵向分别设置不同的值即可。

div{
    width: 200px;
    height: 100px;
    border-radius: 50% / 25%;
    background-color: #f00;
}

上述代码中，我们将横向的圆角设置为50%，纵向的圆角设置为25%，就可以创建一个宽高比为2:1的椭圆形。

除了使用border-radius属性之外，我们也可以使用伪元素:before和:after来实现圆形效果。例如：

div{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #f00;
}
div:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    Box-sizing: border-Box;
}

上述代码中，我们首先定义了一个宽高为100px的div元素，并给其设置了红色的背景色。然后，通过伪元素:before来创建一个宽高与div相等的元素，并将其位置设置为绝对定位，同时将其边角设置为50%来实现圆形效果。另外，我们还给该元素设置了一个白色的边框，并将盒模型设置为Box-sizing: border-Box，以避免边框占用其内部空间。

总之，无论是使用border-radius属性还是伪元素:before和:after，都可以轻松地让div元素变成圆形，从而实现各种精美的界面效果。