Wie vermeide ich doppelte Ränder in CSS: Umriss vs. negative Ränder?

Vermeiden doppelter Ränder in CSS

Wenn benachbarte Elemente mit Rändern nebeneinander platziert werden, entsteht ein visuelles Artefakt, das als „doppelte Ränder“ bekannt ist. kann am Grenzübergang auftreten. Um diesen unerwünschten Effekt zu beseitigen, ziehen Sie diese CSS-Ansätze in Betracht:

Option 1: Verwendung der Outline-Eigenschaft

In Situationen, in denen die Reihenfolge der Elemente unvorhersehbar ist, kann die Verwendung der Outline-Eigenschaft dies tun Doppelte Ränder effektiv verhindern:

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

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

Beachten Sie, dass Umrisse in älteren Browsern (IE7 und früher) nicht unterstützt werden.

Option 2: Negative Ränder mit Rändern

Wenn die Verwendung von Rändern bevorzugt wird, verwenden Sie negative Ränder, um den doppelten Rand auszugleichen:

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

Das obige ist der detaillierte Inhalt vonWie vermeide ich 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!