Border-Radius wirkt sich nicht auf innere Elemente aus

Lesezeit: 2 Minuten

Benutzeravatar von diracdeltafunk
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.

Benutzeravatar von Ashwin
Ashwin

Hier ist die Geige – http://jsfiddle.net/ashwyn/V98h7/2/

Hinzufügen –

#outer {
   overflow: hidden;
}

und es wird funktionieren.

Weitere Informationen zum overflow Eigentum kann auf MDN gefunden werden.

Benutze das:

#outer { overflow: hidden; }

oder dieses:

#inner1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

Oder Sie können vielleicht dies versuchen:

#outer div:first {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

(Hinweis: Ich habe die letzte Option oben nicht getestet).

Hier ist das Update jsfiddle

http://jsfiddle.net/V98h7/1/

Um Ecken einfach abzurunden border-radius kann 4 Werte annehmen TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-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

Benutzeravatar von Goodmedalist
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.

1431510cookie-checkBorder-Radius wirkt sich nicht auf innere Elemente aus

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy