Wie kann man untergeordnete Inhalte in CSS auf geschwungene übergeordnete Grenzen beschränken?

Eindämmung von Kinderinhalten innerhalb der geschwungenen Ränder der Eltern in CSS

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:

1. Überlauf: versteckt auf #outer: In anderen Browsern als Firefox 3.6 und Unten sollte dies den Inhalt von #inner auf die Kurve des übergeordneten Elements beschränken.

2. 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;
   }

3. Ü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:

inner respektiert jetzt die geschwungenen Grenzen von #outer und sorgt so für ein visuelles Erscheinungsbild harmonisches Design.

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!