Border-Radius wirkt sich nicht auf innere Elemente aus
Lesezeit: 2 Minuten
diracdeltafunk
Ich habe ein Layout, bei dem sich der gesamte Seiteninhalt in einer Box mit abgerundeten Ecken befindet. Dazu gehören der Titel der Seite usw. Ich habe a div Element, das meinen Header-Inhalt enthält, a div die den Hauptinhalt der Seite enthält, und a div die die Fußzeile enthält. Mein Problem ist folgendes: Da die Grenze meines “Headers” div ist nicht abgerundet, der große “Container” div scheint oben nicht abgerundet zu sein. Ich habe nachgeforscht und gezeigt, dass dies einfach der “Header” ist div sich über den “Container” legen div. Ich habe hier ein Beispiel: http://jsfiddle.net/V98h7/.
Ich habe versucht, den Rand des “Headers” zu runden div im gleichen Maße, aber dadurch entsteht ein kleiner Defekt am Rand (er bekommt einen eigenen Rand, der “Header” divHintergrundfarbe von ). Aus Verzweiflung habe ich auch versucht, den Z-Index des Containers auf eine große Zahl zu setzen. DAS hat nichts gebracht.
Ich bin der Meinung, dass es eine einfache Lösung für dieses Problem geben sollte. Ich möchte keinen Javascript-Fix. Ich würde CSS bevorzugen, aber LESS ist auch ok.
Um Ecken einfach abzurunden border-radius kann 4 Werte annehmen TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS
Also border-radius: 20px 20px 0 0; wird Ihr inneres div von oben abrunden. Denken Sie daran, denselben Radiuswert wie den des übergeordneten div zu verwenden, da Sie sonst einen zusätzlichen Rand sehen.
Wie ich in meinem Beitrag sagte, verursacht dies Störungen in einigen Browsern.
– diracdeltafunk
13. Juni 2012 um 5:26 Uhr
Können Sie mir sagen, welche Browser, würde mir auch beim Testen helfen. Ich verwende den gleichen Code an zahlreichen Stellen in meinen Projekten.
– Rishabh
13. Juni 2012 um 5:29 Uhr
In Chrome sehe ich diesen Fehler häufig. Es ist sehr gering, aber vorhanden.
– diracdeltafunk
13. Juni 2012 um 5:36 Uhr
Guter Medaillengewinner
Randkorrektur für CSS-Randradius-Hintergrundfarbe und innere Elemente, die den Randradius brechen. Dies könnte bei den seltsamen Randstörungen helfen.
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
Diese Referenz wurde hier gefunden http://css3please.com/
von https://stackoverflow.com/a/7052769/9071880
Versuchen Sie, dem Container-Div einen etwas größeren Randradius (in den oberen beiden Ecken) als dem Header-Div zu geben.
14315100cookie-checkBorder-Radius wirkt sich nicht auf innere Elemente ausyes