Wie füge ich einen doppelten Rahmen mit verschiedenen Farben hinzu?
Um mit CSS einen doppelten Rahmen zu einer beliebigen Form hinzuzufügen, muss „ :Vor „Selektor ist berühmt. Dadurch werden die Farben beider Ränder geändert, um sie einzigartig zu machen. Nachfolgend finden Sie die Schritt-für-Schritt-Anleitung zum Hinzufügen eines doppelten Rahmens mit unterschiedlichen Farben:
Schritt 1: Div-Element hinzufügen und Klassen zuweisen
Fügen Sie in der HTML-Datei das div-Element innerhalb des
-Tags hinzu und weisen Sie ein „ Klasse ” mit dem Namen „ doppelrandig “. Benutzer können auch ihren eigenen Klassennamen erstellen:< div Klasse = „doppelgrenzig“ >
< / div >
Schritt 2: Style-Tag erstellen
Erstellen Sie in diesem Schritt einen Teil für die Klasse „ doppelrandig “ und erstellen Sie eine Kopie mit dem „ :Vor ”-Selektor. Auf diese Weise werden die CSS-Eigenschaften auf unsere Klassen angewendet:
< Stil >
.doppelt- Grenze {
}
.doppelt- Grenze :Vor {
}
< / Stil >
Schritt 3: Fügen Sie der Klasse Stile hinzu
Die CSS-Eigenschaften gelten für das div-Element, das die Klasse „ doppelrandig “. Die folgenden Stile werden unten erwähnt:
.doppelt- Grenze {
Hintergrund- Farbe : #ccc;
Grenze : 4 Pixel durchgehend grün;
Polsterung: 50px;
Breite : 16px;
Höhe : 16px;
Position: relativ;
Rand: 0 Auto;
}
Nachfolgend finden Sie eine Beschreibung der CSS-Eigenschaften:
- Fügen Sie zunächst „ Hintergrundfarbe “, das grau ist und das „ Grenze ” mit 4 Pixel Gewicht und grüner Farbe.
- Der ' Polsterung ” von 50 Pixeln, um einen Innenraum von 50 Pixeln von allen Seiten zu erzeugen.
- Am Ende ist das „ Breite ' Und ' Höhe' von 16px. Auch der ' Rand „ist automatisch 0, was bedeutet, dass der obere und untere Rand Null sind und links liegen.
Die Webseite sieht so aus:
Die Ausgabe zeigt an, dass der Rahmen auf „div“ angewendet wird.
Schritt 4: Hinzufügen des CSS-Selektors
Gehen Sie nun zum zweiten Feld im Style-Tag, das „ :Vor ”-Selektor angehängt und schreiben Sie den folgenden Code:
.doppelt- Grenze :Vor {Hintergrund : keiner;
Grenze : 4 Pixel durchgehend blau;
Inhalt : „“ ;
Position: absolut;
oben: 4px;
links: 4px;
rechts: 4px;
unten: 4px;
}
Nachfolgend werden die Eigenschaften erläutert:
- Benutzen Sie die „ Position ”-Eigenschaft, um die Position eines Elements festzulegen.
- Danach wird das „ oben, links, rechts und unten „definiert den Rand des neu erstellten Elements gegenüber dem Original.
- Ein CSS-Selektor namens „: Vor Fügt Inhalt vor einem ausgewählten Element hinzu.
Die Ausgabe sieht so aus:
Auf diese Weise kann ein doppelter Rand mit verschiedenen Farben hinzugefügt werden.
Abschluss
Um einen doppelten Rahmen hinzuzufügen, erstellen Sie zunächst ein div-Element und weisen Sie es einer Klasse zu. Fügen Sie dann das CSS hinzu „ Position ”-Eigenschaft, die auf „relativ“ gesetzt werden muss. Fügen Sie anschließend den CSS-Selektor „:before“ hinzu, damit Benutzer Inhalte vor einem ausgewählten Element hinzufügen können. In diesem Leitfaden wurde die Verwendung von Doppelrändern mit verschiedenen Farben demonstriert.