html - 等しい幅と高さを適用すると、この CSS はどのように円を生成しますか?

Question

このCSSは、等幅/高さの半分を正確に適用する円をどのように生成しますか?

div{
    width: 200px; 
    height: 200px; 
    border-radius: 100px; 
    background-color: red;
}

Answer 1

この説明を読むと、すべてが明確になります:)

使い方

4 つの個別の border-*-radius プロパティ (border-bottom-left-radius、border-top-left-radius など) を使用して個別に角を丸くするか、border-radius 短縮形プロパティを使用して 4 つの角すべてを同時に作成できます。

Answer 2

これは、境界半径が原因です。元の正方形のちょうど半分である 100 ピクセルに設定すると、円になります。やってみてください：

div{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: red;
}