W jaki sposób ten CSS tworzy okrąg?

206

To jest CSS:

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

Jak tworzy koło poniżej?

Wpisz opis zdjęcia tutaj

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

Wpisz opis zdjęcia tutaj

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

Wpisz opis zdjęcia tutaj

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?

Navin Rauniyar
źródło
14
Jest to obiekt 0x0 z obramowaniem 180 pikseli , który ma zaokrąglone rogi. Tak więc zaokrąglone rogi są ćwiartkami koła.
Kaz
mam głupie pytanie, dlaczego chcesz zrobić circlez obramowaniem? możemy łatwo zrobić circlez widtha heightwięc dlaczego robimy zborder
mechanik
7
Do utworzenia okręgu użyj <code> promień obramowania: 50% </code> - ułatwia dostosowanie tylko szerokości / wysokości, gdy układ jest odpowiedni.
David Gilbertson,
Tak, panie, to matematyka
Medet Tleukabiluly

Odpowiedzi:

372

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 ):

W3C: Obszary typowego pudełka

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:

Przykładowy obraz

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;
}

Obramowanie stosowane tylko w dwóch rogach

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

Dalsze zasoby

Bibliografia

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.

Zeta
źródło
Nie sądzę, że css3-background zawiera jakiekolwiek odniesienia do css3-box (css3-box oczekuje na przepisanie).
BoltClock
@BoltClock: Myślałem, że css3-box zdefiniuje krawędzie . We wstępie jest tylko odniesienie do css2.1-box (nienormatywne), a także podany obraz, więc css3-box nie jest tak naprawdę potrzebny do zrozumienia border-radius(jakich zmian należy się spodziewać po przepisaniu css3- pudełko?).
Zeta
@Zeta Mam głupie pytanie, dlaczego chcesz zrobić circlez obramowaniem? możemy łatwo zrobić circlez widtha heightwięc dlaczego robimy zborder
mechanik
1
@Sarfaraz: Spójrz na pytanie OP: „Jak więc granica 180px zmienia height/width-> 0pxsię w okrąg o promieniu 180px?” . Po prostu odpowiedziałem na pytanie. Istnieją inne sposoby utworzenia koła, ale OP był zainteresowany jedynie działaniem tej konkretnej metody.
Zeta
@Zeta: Nie jestem pewien, co dokładnie zostanie zmienione, ale biorąc pod uwagę, że WD nie był aktualizowany od 6 lat, podejrzewam, że wiele będzie. Wiem, że sekcja 11 ( overflowrodzina właściwości) żyje teraz we własnym module css-overflow-3, ale nie zostało to jeszcze odzwierciedlone w ED. Zobaczysz wiele problemów w ED, ale wyobrażam sobie, że nie jest to wyczerpująca lista: dev.w3.org/csswg/css3-box
BoltClock
94

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.

Wpisz opis zdjęcia tutaj

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;
}

Wpisz opis zdjęcia tutaj

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;
}

Wpisz opis zdjęcia tutaj

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;
}

Wpisz opis zdjęcia tutaj

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;
}

Wpisz opis zdjęcia tutaj

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.

Bhojendra Rauniyar
źródło
7
W rzeczywistości obecna wersja tej odpowiedzi trochę za daleko. Pytanie brzmi po prostu: „jak ten CSS tworzy okrąg”, a nie „jak ogólnie działa promień granicy”, więc choć technicznie poprawne, to trochę za dużo. Możesz także sformatować pytanie i umieścić rzeczywisty kod w środowiskach kodu.
Zeta
3

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

rahul_pratap
źródło
3

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.

SanketS
źródło
1

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;
}
Rajender Joshi
źródło
9
Co? „Jak działa .a?” „Oto porównanie między .a i .b” Nie jestem pewien, co próbujesz tu powiedzieć.
BoltClock