Wie kann man in CSS dafür sorgen, dass untergeordnete Elemente den gekrümmten Rahmen des übergeordneten Elements respektieren?

„Gebogener Rand zwingt untergeordnete Elemente dazu, den Rahmen des übergeordneten Elements zu respektieren“ in CSS

Problem:

In HTML werden untergeordnete Elemente innerhalb des übergeordneten Elements platziert und das übergeordnete Element hat einen geschwungenen Rand. Das untergeordnete Element erstreckt sich jedoch über den gekrümmten Rand des übergeordneten Elements hinaus. Wie kann man dafür sorgen, dass untergeordnete Elemente den gekrümmten Rand des übergeordneten Elements respektieren?

CSS-Codebeispiel:

<code class="css">#outer {
  display: block;
  float: right;
  margin: 0;
  width: 200px;
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
}

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}</code>

Antwort:

Gemäß CSS3-Spezifikation:

Der Inhalt des ersetzten Elements wird immer auf die Inhaltskantenkurve zugeschnitten.

Das bedeutet, dass die Einstellung overflow:hidden für das übergeordnete Element #outer funktionieren sollte. Dies funktioniert jedoch nicht in Firefox 3.6 und niedriger. Das Problem wurde in Firefox 4 behoben:

Abgerundete Ecken schneiden jetzt Inhalte und Bilder ab (wenn overflow:visible nicht festgelegt ist).

Die Lösung sollte also lauten:

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

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

Diese Lösung ist für Firefox 3.6 und niedriger.

Das obige ist der detaillierte Inhalt vonWie kann man in CSS dafür sorgen, dass untergeordnete Elemente den gekrümmten Rahmen des übergeordneten Elements respektieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!