Wie erstelle ich eine Randüberlagerung für ein untergeordnetes Div mit Pseudoelementen?

Erstellen eines untergeordneten Div mit Randüberlagerung

Um einen Randüberlagerungseffekt für ein untergeordnetes Div zu erstellen, können Sie die Verwendung von Pseudoelementen in Betracht ziehen. Dieser Ansatz bietet mehrere Vorteile:

• Vermeidet die Notwendigkeit zusätzlicher Markierungen.
• Verbessert die Kontrolle über Randposition und -größe.

Implementierungsbeispiel :

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

<div class="button">
  some text
</div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Randüberlagerung für ein untergeordnetes Div mit Pseudoelementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!