Wie man untergeordnete Elemente in CSS dazu bringt, gekrümmte Ränder zu berücksichtigen: Eine Frage des Überlaufs?

Das Dilemma des Kind-Eltern-Grenzgehorsams in CSS lösen

Beim Umgang mit verschachtelten Elementen in CSS ist es oft notwendig, dass das untergeordnete Element dies tut Halten Sie sich an die geschwungenen Ränder des übergeordneten Elements. Dies kann jedoch manchmal ein Problem sein und dazu führen, dass das untergeordnete Element über die Grenzen seines übergeordneten Elements hinausgeht.

Das Problem:

Bedenken Sie den folgenden HTML- und CSS-Code:

<code class="html"><div id="outer">
  <div id="inner"></div>
</div></code>

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

#inner {
  background-color: green;
  height: 10px;
}</code>

In diesem Szenario erstreckt sich das #innere Div über die gekrümmten Ränder des #äußeren Div hinaus, wodurch eine unerwünschte Überlappung entsteht.

Die Lösung:

Gemäß den CSS3-Spezifikationen werden Elemente wie Elemente auf Blockebene an der Kurve des Rahmens ihres übergeordneten Elements abgeschnitten. Es gibt jedoch einige Ausnahmen, darunter ersetzte Elemente.

Ersetzte Elemente:

Ersetzte Elemente, wie z. B. und