スケーリング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" />