Frage:
Wie verhindert man eine Kinderdivergenz, „#inner“, trotz Versuchen, es einzuschränken, über die gekrümmten Grenzen seines übergeordneten Divs „#outer“ hinauszugehen?
Erklärung:
Laut CSS Spezifikationen, Rahmen und Hintergrundeffekte werden auf die Kurve zugeschnitten, während ersetzte Elemente ihren Inhalt immer auf die Kurve zuschneiden. Inhalte können sich jedoch immer noch überschneiden.
Lösung:
Spezifische Randkurven auf #inner: Alternativ können Sie in Firefox 3.6 und niedriger spezifische Kurven für jeden Rand definieren.
#inner { -moz-border-radius: 10px 10px 0 0; }
Überlauf: versteckte spezifische Kurven auf #inner: Für optimale Kompatibilität kombinieren Sie beide Ansätze für eine saubere Lösung.
#outer { overflow: hidden; } #inner { -moz-border-radius: 10px 10px 0 0; }
Beispiel:
<div id="outer" style="background-color: white; overflow: hidden; border-radius: 10px;"> <div id="inner" style="background-color: green; -moz-border-radius: 10px 10px 0 0;"> </div> </div>
Ergebnis:
Das obige ist der detaillierte Inhalt vonWie kann man untergeordnete Inhalte in CSS auf geschwungene übergeordnete Grenzen beschränken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!