これはCSSです：

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

下の円はどのように生成されますか？

長方形の幅が180ピクセルで高さが180ピクセルの場合、次のように表示されます。

ボーダー半径30ピクセルを適用すると、次のようになります。

長方形は小さくなり、半径のサイズが大きくなるとほとんど見えなくなります。

では、180ピクセルの境界線はどのようにしheight/width-> 0pxて半径180ピクセルの円になるのでしょうか。

高さ/幅-> 0pxの180ピクセルの境界線は、どのようにして半径180ピクセルの円になりますか？

それを2つの質問に再構成しましょう：

どこwidthでheight実際に適用されますか？

典型的なボックス（ソース）の領域を見てみましょう：

heightそしてwidth正しいボックスモデルは（何のQuirksモード、無古いInternet Explorerなど）で使用されていない場合は、コンテンツのみに適用されます。

どこにborder-radius適用されますか？

border-radiusボーダーエッジに適用されます。パディングもボーダーもない場合、コンテンツエッジに直接影響し、3番目の例になります。

これは、境界半径/円に対して何を意味しますか？

これは、CSSルールの結果、境界線のみで構成されるボックスになることを意味します。ルールでは、このボーダーの各辺の最大幅は180ピクセルである必要がありますが、一方で、同じサイズの最大半径が必要です。

画像では、要素の実際のコンテンツ（小さな黒い点）は実際には存在しません。適用しなかった場合border-radius場合は、緑色のボックスになります。border-radiusあなたに青い円を与えます。

border-radius 2つのコーナーのみに適用すると、理解が容易になります。

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

あなたの例ではすべてのコーナー/ボーダーのサイズと半径が等しいので、あなたは円を取得します。

その他のリソース

参考文献

• W3C：CSSの背景と枠線モジュールレベル3（esp。5. 角の丸い）

デモ

• 下のデモを開いてください。これはborder-radius境界がどのように影響するかを示しています（内側の青いボックスをコンテンツボックス、内側の黒い境界をパディング境界、空のスペースをパディング、巨大な赤い境界を境界）。内側のボックスと赤い境界線の交差部分は、通常、コンテンツの端に影響します。

var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');

all.on('change keyup', function() {
  $('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
});

$('#total').on('change keyup', function() {
  $('#box').css('borderRadius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
  all.val(this.value);
  all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});

#box {
  margin:auto;
  width: 32px;
  height: 32px;
  border: 100px solid red;
  padding: 32px;
  transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -webkit-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="innerBox"></div>
</div>
<table id="chooser">    
  <tr>
    <td><label for="total">Total</label></td>
    <td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="totalText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopLeft">Top-Left</label></td>
    <td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopLeftText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopRight">Top right</label></td>
    <td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomRight">Bottom right</label></td>
    <td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomLeft">Bottom left</label></td>
    <td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomLeftText" value="0" type="text" /></td>
  </tr>
  <caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>

デモ

この画像デモで別の方法で質問を調べてみましょう：

最初に境界線の半径がどのように生成されるかを見てみましょう。

半径を生成するには、境界の両側を使用します。border-radiusを50ピクセルに設定すると、片側から25ピクセル、反対側から25ピクセルを使用します。

そして、両側から25ピクセルを取得すると、次のようになります。

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

今度は、1つのコーナーに適用するのに最大の正方形がどれだけかかるかを見てください。

上から180ピクセル、右から180ピクセルまで使用できます。その後、次のように生成されます。

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

そして、半径の等しくない値を設定した場合、これがどのように生成されるかを参照してください。

境界線の半径を2つのコーナーのみに不均等に適用するとします。

• 右上隅から180ピクセル

• 右下隅から100ピクセル

その後、それはかかります

• 右上：上から90ピクセル、右から90ピクセル

• 右下：右から50ピクセル、下から50ピクセル

次に、このように生成されます

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

すべての辺に適用するために、その境界の最大値はどれくらいの正方形を取ることができますか？そして、それがどのようにして円を生成するのかを見てください。

境界線サイズの最大半分、つまり180ピクセル/ 2 = 90ピクセルを使用できます。次に、このような円が生成されます

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

四角形の半分だけを四方に適用するのはなぜですか？

すべてのコーナーが半径値を等しく設定する必要があるためです。

ボーダーの同じ部分を取り、それは円を生成します。

ボーダーはコンテンツの外箱であり、それに半径を適用すると、単に円形のエッジが生成されます。

私はそれが最初に長方形を作成し、各コーナーのheight and width = 180pxように特定の半径で曲線を作成すると思います30px。したがってborder、指定されたで設定されradiusます。

両方.aと.b同一の出力が得られます。

Q.なぜ使用したのですか width: 360px; height: 360px;ですか？

A. border: 180px solid red;中.aのような作品border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */。

このフィドルが概念の理解に役立つことを願っています。

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}