Ich bin in ein Problem laufen, wo die Grenze eines äußeren div mit abgerundeten Ecken wird immer durch ein inneres Element mit einem CSS3 gradiet cut-off. Ist das ein Fehler mit CSS3? Wenn ja, schicke ich gerne einen Fehlerbericht.Ist das ein Bug mit CSS3: Abgerundete Ecken mit CSS3 Gradient
Wenn nicht, wie behebe ich das?
Quelle & Demo hier: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Screenshot:
Das Problem ist nicht der Gradient - geben Sie Ihrem <h2> Element einen soliden Hintergrund zu sehen. Stattdessen müssen Sie die Ecken der <h2> sowie der Verpackung <div> runden.
Fügen Sie border-radius: 10px 10px 0 0; und die entsprechenden herstellerspezifischen Versionen zu <h2> Styling hinzu und alles funktioniert.
Diese Lösung funktioniert für alle Browser außer IE. Ich habe es nur im IE9 versucht, wo die Farbverlaufsfülle über die Grenzen zu fließen scheint. (Oder bin ich etwas fehlt?) Siehe: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – cfouche
Abgerundete Ecken funktionieren nicht in IE8 oder weniger – Downpour046
ist diese Lösung nicht gut, wenn der Container überläuft: sichtbar und es ist scrollbar, und ich stehe vor diesem Problem sofort ... – vsync
Es ist in den Hintergrund Steigungen nicht spezifisch. Es ist nur der Hintergrund des h2 Elementes, das auf den abgerundeten Ecken sitzt. Ich bin nicht sicher, es ein Fehler im engeren Sinne, aber es ist ziemlich gut bekannt. Am einfachsten ist es, die Ecken des Elements mit dem Hintergrund abzurunden. Example: just setup for chrome
overflow: hidden; funktioniert nicht
aber dies tut:
h2
{
position:relative;
z-index:-1;
....
}
großartige Lösung, es funktioniert das Beste. – vsync
es ist ein recht häufiges Problem, wenn Sie den Hintergrund auf einem anderen Element zu den abgerundeten Ecken gesetzt. – Spudley