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 habe divs abgerundet, die in FF3 gerundet zu sein scheinen, aber auf Safari und Chrome die abgerundeten Ecken sind nicht da.

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 aus wie der maximale Radius, dass das 20-Pixel-Hoch div 18px ist handhaben kann. Es ist nicht unbedingt klar, was für einen 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 Ihre CSS-Selektor anpassen, so heißt es .round statt #round.)

Answer 2

Für jedermann auf diese Hilfe Bezugnahme mit abgerundeten Ecken, ich stimme mit Jakobs Antwort in Bezug auf Webkit, aber auch die Frage, Chrome funktioniert nicht erwähnt. Chrome nutzt Standard CSS3 abgerundete Ecken, die sind genau wie WebKit, aber ohne den vorhergehenden ‚-webkit-‘ auf die Regel. Diese sind wie folgt:

border-bottom-right-radius:2px;

Um zu berücksichtigen, Firefox, Webkit und Chrome, würden Sie so etwas 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 Regeln CSS3 und wird von Chrome unterstützt. Dies ist ein guter Weg, um auch abgerundete Ecken im IE mit so etwas wie CSS3Pie zu erhalten: http://css3pie.com/

Answer 3

Sie nicht benötigen Sie eine Grenze oder border-width Eigenschaft sowie die verschiedenen border-radius-Eigenschaften anwenden?

Auch ich habe bemerkt, Safari den Radius über einem bestimmten Radius Werte fallen -. Versuchen, die Pixelwerte zu reduzieren und sehen, was passiert

Answer 4

einfache Art nur verwenden:

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

Dabei gilt:

border-radius:top right bottom left;