Webkit promień granicy czasami obowiązywać

Question

Kwestia ta jest o własności CSS3 border-radius (http://www.css3.info/border-radius-apple-vs-mozilla/)

Przykładem tego problemu jest tutaj:

http://jamtodaycdn.appspot.com/bin/rounded.html

W tym adresem URL, mam zaokrąglone divy, które wydają się zaokrąglone w FF3, ale w Safari i Chrome nie ma zaokrąglonych rogów.

Styl jest w następujący sposób:

-moz-border-radius-bottomleft:2px; 
-moz-border-radius-bottomright:92px; 
-moz-border-radius-topleft:92px; 
-moz-border-radius-topright:2px; 
-webkit-border-bottom-left-radius: 2px; 
-webkit-border-bottom-right-radius: 92px; 
-webkit-border-top-left-radius: 92px; 
-webkit-border-top-right-radius: 2px; 

jestem dość pewny, że CSS jest prawidłowo sformatowany, więc jestem bladego pojęcia na czym polega problem.

Answer 1

Problem pojawia się w promieniach 92px. Wygląda na to, że maksymalny promień, który może obsłużyć element o wysokości 20 pikseli, wynosi 18 pikseli. Nie jest oczywiste, co oznacza promień 92 pikseli w tym przypadku. Można jednak określić zarówno X i Y za pomocą promienia coś takiego:.

-webkit-border-bottom-right-radius: 92px 18px; 

(dygresja, nie należy używać tego samego identyfikatora dla wielu elementów HTML Zamiast tego należy użyć klasy i dostosować swój CSS selektor, więc mówi .round zamiast #round.)

Answer 2

Nie musisz stosować właściwości obramowania lub szerokości brzegowej, a także różnych właściwości o zakresie brzegowym?

Zauważyłem też, że Safari upuszcza promień powyżej określonych wartości promienia - spróbuj zmniejszyć wartości pikseli & Zobacz, co się stanie.

Answer 3

Dla każdego, kto mówi o tym za pomocą zaokrąglonych narożników, zgadzam się z odpowiedzią Jacoba na temat Webkita, ale w pytaniu wspomniano również, że Chrome nie działa. Chrome używa standardowych zaokrąglonych rogów CSS3, które są dokładnie takie, jak Webkitów, ale bez poprzedzającej "-webkit-" reguły. Są one następujące:

border-bottom-right-radius:2px; 

do uwzględnienia Firefox, Chrome i Webkit, trzeba by zrobić coś takiego:

-moz-border-radius-topright:3px; 
-moz-border-radius-bottomright:3px; 
-webkit-border-top-right-radius:3px; 
-webkit-border-bottom-right-radius:3px; 
border-top-right-radius:3px; 
border-bottom-right-radius:3px; 

Trzeci zestaw reguł są zasady CSS3 i są obsługiwane przez Chrome. Jest to dobry sposób, aby również uzyskać zaokrąglone narożniki w IE za pomocą czegoś podobnego CSS3Pie: http://css3pie.com/

Answer 4

typ prosty wystarczy użyć:

border-radius:92px 92px 2px 2px;

gdzie:

border-radius:top right bottom left;