38 Stimmen

Border-radius wirkt sich nicht auf innere Elemente aus

Ich habe ein Layout, bei dem sich der gesamte Seiteninhalt in einem Kasten mit abgerundeten Ecken befindet. Dies schließt den Titel der Seite usw. ein. Ich habe eine div Element, das meinen Header-Inhalt enthält, ein div die den Hauptinhalt der Seite enthält, und eine div die die Fußzeile enthält. Mein Problem ist folgendes: Da der Rand meiner "Kopfzeile" div nicht abgerundet ist, der große "Container" div scheint oben nicht abgerundet zu sein. Ich habe nachgeforscht und festgestellt, dass dies einfach die "Kopfzeile" ist div die sich über den "Container" legt div . Ich habe hier ein Beispiel: http://jsfiddle.net/V98h7/ .

Ich habe versucht, den Rand der "Kopfzeile" abzurunden. div in gleichem Maße, was jedoch zu einem kleinen Defekt am Rand führt (er erhält einen eigenen Rand, den "Kopf". div die Hintergrundfarbe). Aus Verzweiflung habe ich auch versucht, den Z-Index des Containers auf eine große Zahl. Das hat nichts gebracht.

Ich bin der Meinung, dass es eine einfache Lösung für dieses Problem geben sollte. Ich möchte keine Javascript-Lösung. Ich würde CSS bevorzugen, aber LESS ist auch in Ordnung.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X