CSS3 Randradius + andere Randbreite, hässlicher Übergang

Ich habe eine weitere knifflige CSS3-Situation, die mir den Kopf zerbricht. Ich style ein Formular mit CSS, um einen 10px-Rahmen an den Seiten und einen 12px-Rahmen an der Unterseite in Kombination mit einem 15px-Rahmenradius zu haben.CSS3 Randradius + andere Randbreite, hässlicher Übergang

Leider ist der Punkt, wo die 12px und die 10px Grenzen den Übergang treffen, nicht graduell, aber es gibt einen 2px Brocken, der aus der Innenseite der Grenze herausragt. Beispiel (Größen für Klarheit vergrößert):

http://jsfiddle.net/LnKND/1/

Jede Idee, wie dies nur mit CSS zu beheben und keine zusätzlichen Elemente? Oder ist es gerade so, wie es momentan gerendert wird, und sollte ich eine andere Lösung finden?

Quelle

2010-12-09 Stephan Muller

Welchen Browser benutzen Sie? Ich denke nicht, dass ich in der Lage bin, das Problem zu reproduzieren, das Sie mit Firefox verwenden 3.6/ie9 –

Ihr Beispiel-Beispiel hat einen Fehler - '-moz-border-Radius: 0 0 25px 15p;' fehlt das 'x' am Ende von '15px'. Dies bedeutet, dass es in Firefox nicht funktioniert. – Spudley

übrigens etwas Off-Topic, aber wenn Sie Rand Radius in IE6/7/8 wollen, überprüfen Sie http://css3pie.com – Spudley

hinzufügen

border-bottom-left-radius:10px 20px; 
    border-bottom-right-radius:10px 20px;

Referenz: http://www.w3.org/TR/css3-background/#the-border-radius

für mozilla Verwendung

-moz-border-radius-bottomright 
    -moz-border-radius-bottomleft

wenn Sie wollen, auch wenn es das Problem automatisch behandelt (, wenn Sie die Tippfehler Pfix zu px im Beispiel).

Referenz: https://developer.mozilla.org/en/CSS/border-bottom-right-radius

Quelle

2010-12-09 16:53:39

Dies scheint es zu beheben, aber ich bin mit einem quadratischen inneren Rand verlassen. Ich möchte sowohl die Innenseite als auch die Außenseite abgerundet haben, was nur funktioniert, wenn der Umrandungsradius größer ist als die Rahmenbreite .. so dass ich ein Problem habe: P –

@Stephan, sieht aus wie eine Chrome * Buggy * Implementierung . Hier ist ein großes Schaufenster http://muddledramblings.com/table-of-css3-border-radius-compliance für weitere Informationen. –

Whoa, interessanter Link. Vielen Dank. –

CSS3 Randradius + andere Randbreite, hässlicher Übergang

Antwort

Verwandte Themen