css圆圈怎么用百分比写

在CSS中，我们经常需要使用到圆形，而常用的方式是使用border-radius属性来设置圆形。但是如果我们想要使用百分比来设置圆形，该怎么办呢？下面我们就来讲一下使用百分比设置CSS圆圈的方法。

.circle {
       width: 50%;
       padding-top: 50%;
       border-radius: 50%;
       background-color: blue;
}
    

在上述代码中，我们使用了一个div，并设置了其宽度为50%。同时，为了让这个div成为一个正圆形，我们设置了padding-top属性为50%。这是因为padding、margin和height等属性的百分比都是相对于元素的宽度来计算的，所以我们通过设置这两个属性来使得div的宽高比例为1:1。

最后，我们设置了border-radius为50%来让div成为一个圆形，并设置了背景颜色为蓝色。这样，我们就成功地用百分比设置了一个CSS圆圈。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！