To jest CSS:

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

Jak tworzy koło poniżej?

Załóżmy, że jeśli prostokąt ma szerokość 180 pikseli, a wysokość 180 pikseli, wyglądałoby to tak:

Po zastosowaniu promienia granicy 30 pikseli wyglądałoby to tak:

Prostokąt staje się coraz mniejszy, czyli prawie zniknie, jeśli zwiększy się rozmiar promienia.

Jak więc granica 180 pikseli height/width-> 0pxstaje się okręgiem o promieniu 180 pikseli?

W jaki sposób granica 180 pikseli o wysokości / szerokości -> 0 pikseli staje się okręgiem o promieniu 180 pikseli?

Przeformułujmy to na dwa pytania:

Gdzie widthi heightwłaściwie mają zastosowanie?

Rzućmy okiem na obszary typowego pudełka ( źródło ):

heightI widthstosować tylko w treści, jeśli poprawny model box jest używany (brak trybu dziwactwa, nie stary Internet Explorer).

Gdzie border-radiusdotyczy?

border-radiusStosuje się na granicy krawędzi. Jeśli nie ma ani dopełnienia, ani ramki, wpłynie to bezpośrednio na krawędź treści, co daje trzeci przykład.

Co to oznacza dla naszego promienia / okręgu granicznego?

Oznacza to, że Twoje reguły CSS dają pole, które składa się tylko z ramki. Reguły mówią, że ta krawędź powinna mieć maksymalną szerokość 180 pikseli z każdej strony, podczas gdy z drugiej strony powinna mieć maksymalny promień tego samego rozmiaru:

Na zdjęciu rzeczywista zawartość twojego elementu (mała czarna kropka) naprawdę nie istnieje. Jeśli nie zastosujesz żadnego border-radius, skończysz na zielonym polu. border-radiusDaje niebieskie kółko.

Łatwiej jest to zrozumieć, jeśli zastosujesz border-radius tylko dwa rogi :

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

Ponieważ w twoim przykładzie rozmiar i promień wszystkich narożników / granic są równe, otrzymasz okrąg.

Dalsze zasoby

Bibliografia

• W3C: Moduł CSS Tła i granice Poziom 3 (szczególnie 5. Zaokrąglone rogi )

Pokazy

• Otwórz demo poniżej, które pokazuje, w jaki sposób border-radiuswpływa na obramowanie (pomyśl o wewnętrznym niebieskim polu jako polu zawartości, wewnętrznym czarnym obramowaniu jako obramowaniu wypełnienia, pustej przestrzeni jako wypełnieniu i gigantycznej czerwonej ramce jako, no cóż, granica). Przecięcia między wewnętrzną ramką a czerwoną ramką zwykle miałyby wpływ na krawędź zawartości.

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>

Próbny

Przeanalizujmy to pytanie w inny sposób, pokazując to zdjęcie:

Zobaczmy najpierw, jak powstaje promień graniczny?

Aby uzyskać promień, potrzeba dwóch stron jego granicy. Jeśli ustawisz promień obramowania na 50 pikseli, zajmie to 25 pikseli z jednej strony i 25 pikseli z drugiej strony.

I biorąc 25 pikseli z każdej strony, wytworzyłby to w ten sposób:

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

Teraz zobacz, ile może zająć maksymalnie kwadrat, aby zastosować w jednym rogu?

Może zająć do 180 pikseli od góry i 180 pikseli od prawej. Wtedy wygenerowałoby to w następujący sposób:

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

I zobacz, jak to się produkuje, jeśli ustawimy nierównomierną wartość promienia?

Załóżmy, że jeśli zastosujesz promień obramowania tylko nierównomiernie do dwóch narożników:

• prawy górny róg do 180 pikseli

• prawy dolny róg do 100 pikseli

To zajmie

• w prawym górnym rogu: 90 pikseli z góry i 90 pikseli z prawej

• u dołu po prawej: 50 pikseli z prawej i 50 pikseli z dołu

Wtedy to by powstało w ten sposób

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

Jaką maksymalną granicę może przyjąć kwadrat, aby zastosować go ze wszystkich stron? I widzisz, jak tworzy koło?

Może zająć do połowy rozmiaru ramki, czyli 180 pikseli / 2 = 90 pikseli. Wtedy utworzyłby taki okrąg

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

Dlaczego nakładanie ze wszystkich stron zajmuje tylko połowę kwadratu?

Ponieważ wszystkie rogi muszą jednakowo ustawić wartość promienia.

Biorąc równe części jego granicy, tworzy koło.

Obramowania są zewnętrznym polem dowolnej zawartości, a jeśli zastosujesz na nim promień, po prostu utworzy okrągłą krawędź.

Myślę, że początkowo tworzy prostokąt z, height and width = 180pxa następnie tworzy krzywą o danym promieniu, jak 30pxprzy każdym narożniku. Więc ustawia się borderz danym radius.

Oba .ai .bdają identyczne wyjście.

P: Dlaczego użyłem width: 360px; height: 360px;?

A. border: 180px solid red;w .apracach takich jak border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Mam nadzieję, że to skrzypce pomoże ci zrozumieć koncepcję.

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