Grenze ist eine der fantastischen Eigenschaften von CSS, die zur Angabe der Grenze des Elements verwendet werden. CSS ermöglicht es den Entwicklern, mit Hilfe desGrenze" Eigentum. Darüber hinaus können Benutzer mehr als einen Rand um das Element mit den gleichen Farben und verschiedenen Farben verwenden, die mit “:Vor" Und ":nach”CSS -Selektoren.

In diesem Tutorial werden Sie den doppelten Rand mit verschiedenen Farben anwenden, indem Sie die CSS -Eigenschaften verwenden.

So wenden Sie Doppelrand mit verschiedenen Farben in CSS an?

Um den doppelten Rand mit verschiedenen Farben anzuwenden, lesen Sie die angegebenen Anweisungen.

Schritt 1: Überschrift einfügen

Fügen Sie zunächst ein Überschriften -Tag mit der “ein

" Schild. Dieses Tag wird verwendet, um die Überschrift von Level 1 anzugeben.

Schritt 2: Erstellen Sie einen DIV -Behälter

Erstellen Sie als nächstes einen Div -Container mit Hilfe des “" Schild. Fügen Sie im Div -Tag eine Klasse hinzudoppelter Grab”.

Schritt 3: Text in Absatz hinzufügen

Dann verwenden Sie die “

"Element und zuweisen Sie ihm eine Klasse"Grenze”. Danach den Text zwischen den “einbetten

LinuxHint Ltd UK

LinuxHint liefert den Inhalt für verschiedene Kategorien, einschließlich Docker, HTML/CSS, Discord, PowerShell, Windows, Github und vieles mehr.

Es kann beobachtet werden, dass der Text im Absatz erfolgreich hinzugefügt wurde:

Schritt 4: Zugriff auf das „Div“ -Element

Greifen Sie nun mit Hilfe der zugewiesenen Klasse auf den „DIV“ -Container zu ".doppelter Grab”.

Schritt 5: Einen Rand hinzufügen

Um eine einzelne Rand hinzuzufügen, wenden Sie die angegebenen Eigenschaften an:

.doppeltes grenzüberschreitend
Position: Relativ;
Hintergrundfarbe: RGB (59, 194, 247);
Grenze: 4px Solid RGB (255, 113, 113);
Polsterung: 1em;
Rand: 0 Auto;
Höhe: 10em;
Breite: 14EM;

Im angegebenen Codeblock:

• “PositionGibt die Position des Elements an. Zum Beispiel haben wir die "festgelegt"relativPosition, um es relativ zu seiner normalen Position zu positionieren.
• “HintergrundfarbeEigenschaft, die zum Festlegen der Farbe der Elemente von der Rückseite verwendet wird.
• “Grenze”Wird verwendet, um eine Grenze um das Element zuzuweisen.
• “PolsterungGibt einen Raum um den Inhalt des Elements an.
• “Rand”Zuweilt leerer Platz um die Grenze des definierten Elements.
• “Höhe”Definiert die Höhe des Elements.
• “Breite”Gibt für die Festlegung der Breite des Elements an.

Infolgedessen wird die Grenze wie folgt hinzugefügt:

Schritt 6: Doppelrand hinzufügen

Greifen Sie nun zusammen mit dem „mit Hilfe des Unterrichtsnamens auf die Klasse zu“ auf die Klasse zu ":Vor”Selektor. Wenden Sie danach die folgenden Eigenschaften an:

.doppelter Grenz: Vor
Hintergrund: Keine;
Grenze: 4px Solid RGB (19, 18, 18);
Inhalt: "";
Bildschirmsperre;
Position: absolut;
Top: 5px;
links: 5px;
Rechts: 5px;
unten: 5px;

Die Beschreibung der obigen Eigenschaften lautet wie folgt:

• “GrenzeDie Eigenschaft wird hier verwendet, um einen weiteren Rand um das Element umzulegen. Hier das "RGBDer Wert weist dem Rand eine andere Farbe zu.
• Der "Inhalt"Eigenschaft wird mit dem" verwendet ":Vor" Und ": afteR ”Pseudoelemente zum Einfügen der erstellten Materialien.
• “Anzeige”Bestimmt, wie ein Element aussieht.
• Hier, "Position”Wird als" eingestellt "absolut”, Was bedeutet, dass die Position fest oder absolut ist.
• “SpitzeEigenschaft definiert die obere Position des Elements.
• “linksGibt die Position des Elements auf der linken Seite an.
• “RechtsWird verwendet, um die richtige Position eines Elements anzugeben.
• “Unterseite”Wird verwendet, um die untere Position eines Elements anzugeben:

Es kann beobachtet werden, dass wir die Doppelgrenze um das Element erfolgreich hinzugefügt haben.

Abschluss

Erstellen Sie zunächst einen Div-Container, um den Doppelrand mit verschiedenen Farben in CSS anzuwenden und ihm eine Klasse „Double-Border“ zuweisen zu. Nächst auf das Element nach Klasse zugreifen und CSS -Eigenschaften anwenden, einschließlich “Grenze","Position" als "relativ" und andere. Greifen Sie dann erneut zusammen mit dem "auf das Element mit dem Unterrichtsnamen zu" zu ":Vor"Selektor und wenden Sie die" an "GrenzeEigenschaft mit der Position als "absolut”. Dieser Beitrag hat Ihnen die Methode für die Anwendung doppelter Grenzen mit unterschiedlichen Farben in CSS beigebracht.