Wie kann ich mit CSS Teilränder für Boxen erstellen?

Erstellen von Teilrändern für Boxen in CSS

In CSS ist es nicht möglich, Boxränder mit bestimmten Größen oder teilweiser Abdeckung direkt zu deklarieren. Es gibt jedoch einen alternativen Ansatz, der diesen Effekt effektiv nachbildet:

Lösung:

Erstellen Sie einen regulären CSS-Rahmen für die Box und fügen Sie ein mit CSS positioniertes untergeordnetes Element hinzu um den Rand auf die gewünschte Länge zu verlängern. Hier ist ein Beispiel:

.box {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
  border: 1px solid black;
}

.box:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

HTML:

<div class="box"></div>

Dieser Code erstellt ein Feld mit einem regelmäßigen schwarzen Rand und einem zusätzlichen 60 Pixel langen, grauen Balken unten, wodurch effektiv ein teilweiser Rand simuliert wird. Diese Technik wird in älteren Browsern, die keine CSS-Positionierung unterstützen, deutlich beeinträchtigt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Teilränder für Boxen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!