Wie verhindert man doppelte Ränder in CSS: Umriss vs. negative Ränder?

Vermeiden von „doppelten“ Rändern in CSS

Wenn zwei benachbarte Elemente mit Rändern nebeneinander platziert werden, kann es so aussehen, als ob sie einen hätten eine doppelte Grenze an der Kreuzung, an der sie sich treffen. Um dieses visuelle Artefakt zu verhindern, sollten Sie die folgenden CSS-Techniken in Betracht ziehen:

Umriss statt Rahmen verwenden

Für Elemente, die in beliebiger Reihenfolge erscheinen können, bietet die Eigenschaft „Umriss“ eine zuverlässige Funktion Lösung:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid;
  margin-top: 1px;
  margin-left: 1px;
}</code>

Negative Ränder

Alternativ wird durch die Verwendung negativer Ränder an den untergeordneten Elementen der doppelte Rand effektiv „gelöscht“:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

Hinweis für ältere Browser

Die Outline-Eigenschaft wird in älteren Browsern wie IE7 und früher nicht unterstützt. In diesen Fällen wird der Ansatz der negativen Marge empfohlen.

Das obige ist der detaillierte Inhalt vonWie verhindert man doppelte Ränder in CSS: Umriss vs. negative Ränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!