Wie erstelle ich eine Randüberlagerung für untergeordnete Divs mit Pseudoelementen?

Erstellen einer Randüberlagerung für untergeordnete Divs

Problem:

Sie müssen ein entwerfen Rahmen, der den Inhalt eines untergeordneten Div überlagert, ähnlich dem bereitgestellten Bild.

HTML- und CSS-Code:

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>

.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
}

Lösung:

Um dies mithilfe von Pseudoelementen zu erreichen, können Sie einen Rahmen erstellen und zusätzliches Markup vermeiden. Sie können auch seine Position und Größe mühelos steuern:

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;
}

Mit dieser Methode können Sie ganz einfach eine stilvolle Rahmenüberlagerung für Ihre untergeordneten Divs erstellen und so die visuelle Attraktivität Ihrer Website verbessern.

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