Wie kann man untergeordnete Elemente in CSS an die geschwungenen Ränder des übergeordneten Elements anpassen?

Untergeordnete Elemente innerhalb der geschwungenen Ränder des übergeordneten Elements ausschneiden

Wenn in CSS ein untergeordnetes Element (#inner) über die geschwungenen Ränder seines übergeordneten Elements (#outer) hinausragt, dann dort Es scheint eine Diskrepanz im Verhalten zwischen Eltern und Kind zu geben. In diesem Artikel wird untersucht, warum dies auftritt, und eine Lösung bereitgestellt, um das untergeordnete Element zu zwingen, sich an die gekrümmten Grenzen des übergeordneten Elements anzupassen.

Das Problem mit überlappenden untergeordneten Elementen

Wenn ein übergeordnetes Element ( #outer) gekrümmte Ränder mithilfe des Randradius aufweist und ein untergeordnetes Element (#inner) über diese Ränder hinausgeht, kann es zu einer Überlappung kommen. Dies liegt daran, dass untergeordnete Elemente standardmäßig nicht darauf beschränkt sind, die gekrümmten Ränder ihrer übergeordneten Elemente zu respektieren.

Überlauf: Versteckte Lösung

Gemäß CSS-Spezifikationen werden Hintergründe und andere Effekte abgeschnitten zum Rand sollte, wie der Überlauf, auch an der Kurve befestigt werden. Daher sollte dieses Problem durch Festlegen von „overflow: versteckt“ für das übergeordnete Element (#outer) behoben werden. Diese Lösung funktioniert jedoch möglicherweise nicht in älteren Browsern wie Firefox 3.6 und niedriger.

Mozilla-spezifischer Hack

Für Firefox 3.6 und niedriger ist ein spezifischer Hack erforderlich. Durch Zuweisen von Kurven zu einzelnen Rändern kann das untergeordnete Element (#inner) gezwungen werden, sich an die gekrümmten Ränder des übergeordneten Elements anzupassen. Zum Beispiel:

<code class="css">#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}</code>

Dieser Hack stellt sicher, dass das untergeordnete Element (#inner) die geschwungenen Ränder seines übergeordneten Elements (#outer) respektiert, auch in älteren Versionen.

Aktualisierte Lösung

In neueren Browsern wie Firefox 4 und höher reicht die Kombination aus overflow:hiden und border-radius aus, um untergeordnete Elemente zu zwingen, den gekrümmten Rändern ihrer übergeordneten Elemente zu folgen. Daher lautet die aktualisierte Lösung:

<code class="css">#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}</code>

Dies gewährleistet die browserübergreifende Kompatibilität zum Ausschneiden untergeordneter Elemente an den geschwungenen Rändern ihrer übergeordneten Elemente.

Das obige ist der detaillierte Inhalt vonWie kann man untergeordnete Elemente in CSS an die geschwungenen Ränder des übergeordneten Elements anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!