css3等比例的圆（css等比例缩小）

CSS3中增加了border-radius属性，可以让我们轻松绘制圆角矩形，但有时候我们需要绘制不同比例的圆形。

在CSS3中，我们可以利用padding属性，通过不同的比例设置宽高相等的元素来绘制等比例的圆形。

.box {
    width: 100px;
    height: 0;
    padding-bottom: 100px;
    border-radius: 50%;
    background-color: #f00;
}

这里设置了元素的宽度为100px，高度为0px，然后通过padding-bottom设置了宽高比例为1:1，再设置border-radius为50%即可绘制一个圆形的效果，同时可以通过background-color来设置圆形的颜色。

如果需要绘制其他比例的圆形，只需要根据需要调整padding-bottom的值即可，例如设置padding-bottom为50%则可以绘制出宽高比例为2:1的圆形，如下所示：

.box {
    width: 200px;
    height: 0;
    padding-bottom: 50%;
    border-radius: 50%;
    background-color: #f00;
}
    

上述代码中，元素的宽度为200px，高度为0px，padding-bottom为50%即宽高比例为2:1的圆形，同样设置了border-radius为50%和背景颜色。

使用CSS3绘制等比例的圆形，不仅可以提高性能，还能减少代码量，更方便实用。

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