Dies ist das CSS:

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

Wie entsteht der Kreis darunter?

Angenommen, eine Rechteckbreite von 180 Pixel und eine Höhe von 180 Pixel sieht folgendermaßen aus:

Nach dem Anwenden des Randradius von 30 Pixel sieht es folgendermaßen aus:

Das Rechteck wird kleiner, das heißt, es verschwindet fast, wenn der Radius größer wird.

Wie wird aus einem Rand von 180 Pixel height/width-> 0pxein Kreis mit einem Radius von 180 Pixel?

Wie wird aus einem Rand von 180 Pixel mit Höhe / Breite-> 0 Pixel ein Kreis mit einem Radius von 180 Pixel?

Lassen Sie uns das in zwei Fragen umformulieren:

Wo widthund heighttatsächlich bewerben?

Werfen wir einen Blick auf die Bereiche einer typischen Box ( Quelle ):

Die heightund widthgelten nur für Inhalte, wenn das richtige Box-Modell verwendet wird (kein Mackenmodus, kein alter Internet Explorer).

Wo border-radiusgilt?

Das border-radiusgilt am Rand. Wenn weder Polster noch Rahmen vorhanden sind, wirkt sich dies direkt auf Ihre Inhaltskante aus, was zu Ihrem dritten Beispiel führt.

Was bedeutet das für unseren Randradius / Kreis?

Dies bedeutet, dass Ihre CSS-Regeln zu einem Feld führen, das nur aus einem Rahmen besteht. Ihre Regeln besagen, dass dieser Rand auf jeder Seite eine maximale Breite von 180 Pixel haben sollte, während er andererseits einen maximalen Radius derselben Größe haben sollte:

Auf dem Bild ist der tatsächliche Inhalt Ihres Elements (der kleine schwarze Punkt) wirklich nicht vorhanden. Wenn Sie keine anwenden, erhalten border-radiusSie das grüne Kästchen. Das border-radiusgibt dir den blauen Kreis.

Es wird einfacher zu verstehen, wenn Sie border-radius nur zwei Ecken anwenden :

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

Da in Ihrem Beispiel Größe und Radius für alle Ecken / Ränder gleich sind, erhalten Sie einen Kreis.

Weitere Ressourcen

Verweise

• W3C: CSS-Modul für Hintergründe und Grenzen Stufe 3 (insbesondere 5. Abgerundete Ecken )

Demonstrationen

• Bitte öffnen Sie die Demo unten, die zeigt, wie sich dies border-radiusauf den Rand auswirkt (stellen Sie sich das innere blaue Feld als Inhaltsfeld, den inneren schwarzen Rand als Polsterrand, den leeren Raum als Polster und den riesigen roten Rand als, gut, vor. Rand). Schnittpunkte zwischen dem inneren Feld und dem roten Rand wirken sich normalerweise auf die Inhaltskante aus.

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>

Demo

Lassen Sie uns die Frage mit dieser Bilddemonstration auf andere Weise untersuchen:

Mal sehen, wie der Randradius erzeugt wird.

Um einen Radius zu erzeugen, werden zwei Seiten des Randes benötigt. Wenn Sie den Rahmenradius auf 50 Pixel einstellen, werden 25 Pixel von einer Seite und 25 Pixel von einer anderen Seite benötigt.

Und wenn man 25 Pixel von jeder Seite nimmt, würde das so aussehen:

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

Nun sehen Sie, wie viel Quadrat maximal für die Anwendung an einer Ecke erforderlich ist.

Es kann bis zu 180 Pixel von oben und 180 Pixel von rechts dauern. Dann würde es so produzieren:

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

Und sehen Sie, wie es erzeugt, wenn wir den ungleichen Wert des Radius einstellen?

Angenommen, Sie wenden den Randradius nur ungleichmäßig auf zwei Ecken an:

• obere rechte Ecke auf 180 Pixel

• rechts unten auf 100 Pixel

Dann würde es dauern

• oben rechts: 90 Pixel von oben und 90 Pixel von rechts

• unten rechts: 50 Pixel von rechts und 50 Pixel von unten

Dann würde es so produzieren

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

Wie viel Maximum seiner Grenze kann es von Quadrat nehmen, um auf allen Seiten aufzutragen? Und sehen Sie, wie es einen Kreis erzeugt?

Es kann bis zur Hälfte der Randgröße dauern, dh 180 Pixel / 2 = 90 Pixel. Dann würde es einen Kreis wie diesen erzeugen

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

Warum dauert es nur die Hälfte des Quadrats, um auf allen Seiten aufzutragen?

Weil alle Ecken ihren Radiuswert gleich einstellen müssen.

Er nimmt gleiche Teile seines Randes und erzeugt einen Kreis.

Rahmen sind das äußere Feld eines Inhalts. Wenn Sie einen Radius darauf anwenden, wird einfach die kreisförmige Kante erzeugt.

Ich denke, dass es zunächst ein Rechteck mit height and width = 180pxund dann eine Kurve mit einem bestimmten Radius wie 30pxbei jeder Ecke erstellt. Also setzt es bordermit gegeben radius.

Beide .aund .bgeben die identische Ausgabe.

Q. Warum habe ich verwendet width: 360px; height: 360px;?

A. border: 180px solid red;in .aArbeiten wie border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Ich hoffe, diese Geige hilft Ihnen, das Konzept zu verstehen.

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