Korzystanie z promienia obramowania CSS o wiele większego niż wymiary elementów

Question

Czy jest jakiś problem z używaniem border-radius, który jest znacznie większy niż wymiary elementu?

Na przykład, gdybym chciał zrobić klasę .circle tak:

.circle { 
    -webkit-border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    border-radius: 1000px; 
} 

więc teraz mogę zastosować tę klasę do każdego elementu, aby to koło, tak jak poniżej:

<img width="80" height="80" alt="My Gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc"> 

Wiem, że dotychczas nie miałem żadnych problemów, ale czy po prostu przygotowuję się na więcej problemów?

Answer 1

Nie ma tu żadnego problemu. Możesz swobodnie stosować lekcję tam, gdzie chcesz, bez żadnych problemów. Elementy mniejsze niż (wysokość lub szerokość jest mniejsza niż) 2000px staną się okręgami, elementy większe niż (wysokość lub szerokość jest większa niż) 2000px nie staną się okręgami, ale zachowają swoje pierwotne kształty, ale w większości zaokrąglone rogi.

ten przedstawia w W3 here:

„Jeżeli promień pozioma jest większa niż połowa szerokości skrzynki, to redukuje tej wartości Jeśli dowolny promień pionowej jest większy niż połowa. Wysokość pudełka, , jest zmniejszona do tej wartości. (Istnieją cztery poziome i cztery pionowe promienie.) Jest to łatwy algorytm, ponieważ analizuje każdy promień niezależnie od wszystkich innych , ale blokuje prawdopodobnie użyteczne granice które łączą duże i małe promienie i mogą zamienić kwartalne koła w ćwierć elipsy. " - The documentation of the border-radius property

należy wspomnieć, że można użyć jako wartości procentów, 50% to max, która będzie tworzyć okrąg dany element jest kwadratem pierwotnie. Jeśli element nie jest kwadratem, tworzy elipsę.

Należy również pamiętać, że wszystkie wartości powyżej 50% będą równoważne 50% po zastosowaniu do wszystkich narożników (np. Stenogram border-radius:50%, który stosuje go do każdego rogu). Jbutler483 pointed out w komentarzach, jeśli jest stosowany do poszczególnych narożników, 50% to nie to samo co 100% ze względu na sposób, w jaki łączą się ze sobą. Zamiast tego wszystkie wartości powyżej 100% są równoważne 100%.

Należy również pamiętać, że coś takiego jak border:50% i border:really-high-pixel-value może mieć różne efekty, jeśli element nie jest kwadratowy.