缩放CSS边框半径

Question

假设我有以下CSS圆圈，但要将宽度和高度分别更改为320px。 如何正确缩放-moz-border-radius ， -webkit-border-radius ， border-radius ？

好像我只是将所有边框半径都设为320px一样，圆的形状仍保持不变，但不确定这是否是正确的方法。

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Answer 1

如果您有任何宽度/高度的正方形 ，只需设置border-radius: 50%; 然后，无论元素如何缩放，都应该给出一个圆圈。

 #circle1 { border-radius: 50%; width: 100px; height: 100px; background-color: #E74C3C; } #circle2 { border-radius: 50%; width: 200px; height: 200px; background-color: #F1C40F; position: absolute; left: 125px; } #circle3 { border-radius: 50%; width: 300px; height: 300px; background-color: #2ECC71; position: absolute; left: 225px; } 

 <div id="circle1" /> <div id="circle2" /> <div id="circle3" />