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-> 0px
staje się okręgiem o promieniu 180 pikseli?
html
css
css-shapes
Navin Rauniyar
źródło
źródło
circle
z obramowaniem? możemy łatwo zrobićcircle
zwidth
aheight
więc dlaczego robimy zborder
Odpowiedzi:
Przeformułujmy to na dwa pytania:
Gdzie
width
iheight
właściwie mają zastosowanie?Rzućmy okiem na obszary typowego pudełka ( źródło ):
height
Iwidth
stosować tylko w treści, jeśli poprawny model box jest używany (brak trybu dziwactwa, nie stary Internet Explorer).Gdzie
border-radius
dotyczy?border-radius
Stosuje 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-radius
Daje niebieskie kółko.Łatwiej jest to zrozumieć, jeśli zastosujesz
border-radius
tylko dwa rogi :Ponieważ w twoim przykładzie rozmiar i promień wszystkich narożników / granic są równe, otrzymasz okrąg.
Dalsze zasoby
Bibliografia
Pokazy
border-radius
wpł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.Pokaż fragment kodu
źródło
border-radius
(jakich zmian należy się spodziewać po przepisaniu css3- pudełko?).circle
z obramowaniem? możemy łatwo zrobićcircle
zwidth
aheight
więc dlaczego robimy zborder
height/width-> 0px
się 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.overflow
rodzina 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-boxPró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:
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:
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
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
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.
źródło
Obramowania są zewnętrznym polem dowolnej zawartości, a jeśli zastosujesz na nim promień, po prostu utworzy okrągłą krawędź.
źródło
Myślę, że początkowo tworzy prostokąt z,
height and width = 180px
a następnie tworzy krzywą o danym promieniu, jak30px
przy każdym narożniku. Więc ustawia sięborder
z danymradius
.źródło
Oba
.a
i.b
dają identyczne wyjście.P: Dlaczego użyłem
width: 360px; height: 360px;
?A.
border: 180px solid red;
w.a
pracach takich jakborder-width: 180px 180px 180px 180px; /* Top Right Bottom Left */
.Mam nadzieję, że to skrzypce pomoże ci zrozumieć koncepcję.
źródło