Webkit Grenzradius manchmal wirksam

Question

Dieses Problem geht es um die CSS3 border-radius Eigenschaft (http://www.css3.info/border-radius-apple-vs-mozilla/)

Ein Beispiel für dieses Problem ist hier:

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

In dieser URL ich abgerundet Divs, die in FF3 abgerundet erscheinen, aber auf Safari und Chrome sind die abgerundeten Ecken nicht vorhanden.

Der Stil ist wie folgt:

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

Ich bin ziemlich sicher, dass diese CSS richtig formatiert ist, also bin ich ratlos, was das Problem ist.

Answer 1

Das Problem scheint in der 92px Radia zu sein. Es sieht so aus, als wäre der maximale Radius, den das 20 Pixel hohe Div verarbeiten kann, 18 Pixel. Es ist nicht unbedingt offensichtlich, was ein 92-Pixel-Radius in diesem Fall bedeutet. Sie können jedoch sowohl ein X- und Y-Radius mit so etwas wie dies angeben.

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

(Seite beachten, sollten Sie nicht die gleiche ID für mehrere HTML-Elemente verwenden Sie sollten Klasse verwenden stattdessen und passen Sie Ihre CSS Wählen Sie also .round statt #round.)

Answer 2

Sie müssen weder eine Rahmen- oder Rahmenbreiten-Eigenschaft noch die verschiedenen Rahmen-Radius-Eigenschaften anwenden?

Auch habe ich bemerkt, dass Safari den Radius über bestimmte Radiuswerte fallen lassen - versuchen Sie, die Pixelwerte zu reduzieren & sehen, was passiert.

Answer 3

Für alle, die auf diese Hilfe mit abgerundeten Ecken verweisen, stimme ich Jacobs Antwort in Bezug auf Webkit, aber die Frage erwähnt auch, dass Chrome nicht funktioniert. Chrome verwendet standardmäßige CSS3-abgerundete Ecken, die genau wie Webkits sind, jedoch ohne das vorangehende "Webkit" in der Regel. Diese sind wie folgt:

border-bottom-right-radius:2px; 

Um zu berücksichtigen, Firefox, Webkit und Chrome, würden Sie brauchen so etwas wie dies zu tun:

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

Der dritte Satz von Regeln sind CSS3 Regeln und werden unterstützt von Chrome. Dies ist ein guter Weg, um auch abgerundete Ecken im IE mit so etwas wie CSS3Pie zu erhalten: http://css3pie.com/

Answer 4

einfache Art nur verwenden:

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

wo:

border-radius:top right bottom left;