Hintergrundüberlauf mit ererbter Grenzradien lösen

Ein interessantes (aber nerviges) Merkmal von CSS ist, dass der Hintergrund des untergeordneten Elements den abgerundeten Rand des übergeordneten Elements überlaufen kann. Beispielsweise kann eine Karte, die interne Elemente enthält. Wenn das interne Element festgelegt ist, kann der Hintergrund den Rand der Karte überlaufen.

normalerweise ist der einfachste Weg, um dieses Problem zu lösen, das Kartenelement overflow: hidden Attribute hinzu. Ich glaube, dies ist die erste Lösung, an die die meisten Menschen denken, wenn sie auf diese Situation stoßen.

Dies erzeugt jedoch ein neues Problem - der Inhalt außerhalb des Kartenelements ist ausgeschnitten - daher ist es unmöglich, negative Margen oder position: absolute zu verwenden, um den Inhalt des untergeordneten Elements aus der Karte zu verschieben.

Es gibt eine etwas umständliche, aber effektivere Möglichkeit, zu verhindern, dass der Hintergrund des untergeordneten Elements den abgerundeten Rand des übergeordneten Elements überfließt, dh der gleichen abgerundeten Rand dem untergeordneten Element hinzuzufügen.

Der einfachste Weg ist es, dem untergeordneten Element den abgerundeten Rand des übergeordneten Elements zu erben:

.child {
  border-radius: inherit;
}

Wenn die Abkürzung von border-radius zu lang ist, können Sie immer noch den abgerundeten Eckradius der vier Ecken gemäß der Situation erben:

.child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

oder für diejenigen, die bereit sind, logische Eigenschaften zu verwenden, hier ist der äquivalente Code. (Ersetzen Sie top und left durch start und bottom und right durch end.)

.child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

Warum nicht den Hintergrund direkt auf der Karte anwenden?

Wenn das .card -Element selbst border-radius enthält und den Hintergrund direkt festlegt, kann der gleiche Effekt erreicht werden. Also, warum nicht das tun?

Nun, manchmal kann man es manchmal nicht tun. Zum Beispiel, wenn Ihr .card Element in zwei Teile unterteilt ist, wobei nur ein Teil davon gefärbt ist.

Warum sollten wir das tun?

Standby kann der beste Grund sein. Zumindest wissen Sie, dass Sie später keine Probleme verursachen werden, wenn Sie das RADED RADIUS -Einstellungsschema verwenden.

Dieser Modus ist besonders nützlich, wenn die CSS -Ankerpositionierung vollständig unterstützt wird. Ich gehe davon aus, dass dies in 1-2 Jahren bald zur Norm für die Pop-up-Positionierung wird.

Das heißt, für Pop-ups ziehe ich es persönlich vor, die Popup-Inhalte aus dem Dokumentstrom herauszuholen und ihn als direktes untergeordnetes Element in das Element zu versetzen. Auf diese Weise kann ich verhindern, dass overflow: hidden bei der Verwendung von Ankerpositionierung Popups herausgeschnitten.

Das obige ist der detaillierte Inhalt vonHintergrundüberlauf mit ererbter Grenzradien lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!