Wie wir wissen, bietet HTML die Struktur von Webseiten, und CSS kann verwendet werden, um Stile anzuwenden. CSS hat auch unterschiedliche Styling -Eigenschaften, mit denen verschiedene Formen wie Quadrate, Kreise, Rechtecke, Ovale, Linien und mehr gezeichnet werden. Insbesondere ist eine Linie eines der vielseitigsten und häufig verwendeten Elemente des Designs, die horizontal und vertikal hinzugefügt werden können.

Dieser Artikel lehrt das Verfahren, um horizontale und vertikale Linien mit CSS zu zeichnen. Lass uns anfangen!

Wie man eine Linie mit CSS zeichnet?

Um horizontale und vertikale Linien mit CSS zu zeichnen, können verschiedene Eigenschaften verwendet werden, wie z. B.:

• “Grenz-links”
• “Grenzrechte”
• “Grenze”
• “Grenzboden”

Lassen Sie uns die Arbeit der oben bereitgestellten Eigenschaften nacheinander verstehen!

Html
Zum Zeichnen von Linien werden wir zunächst die “angeben“Element im Körper unserer HTML -Datei:

Jetzt, um eine DIV zu stylen, die geeigneten Eigenschaften verwenden. In unserem Fall werden wir die “zuweisen“Hintergrundfarbe"Eigenschaftswert als"#e4a2a4", und das "Grenze"Eigenschaftswert als"2px fest #0fafc4”, Was seine Breite, Typ und Farbe angibt, jeweils und die“Höhe"Eigenschaft wird als" festgelegt "200px”.

CSS

div
Hintergrundfarbe: #e4a2a4;
Grenze: 2PX Solid #0fafc4;
Höhe: 200px;

Beispiel 1: Horizontale Linie mit CSS zeichnen
Normalerweise die

---

Element wird verwendet, um horizontale Linien in HTML zu zeichnen. Um jedoch eine horizontale Linie mit CSS zu zeichnen, fügen Sie jedoch hinzu

Element für die Überschrift und dann einen Namen platzieren “H_LINE”In der oben beschriebenen Div der HTML-Datei.

Html

Horizontale Linie

Verwenden Sie nun CSS -Eigenschaften, um eine horizontale Linie zu zeichnen:

• Wir werden das verwendenGrenzbodenEigenschaft, die mit einem bis drei Werten für Linienbreite, Linientyp und Farbe zugeordnet ist. Das folgende Beispiel legt seinen Wert als "als"6PX Solid RGB (80,80,78)”.
• Um die Größe der Linie anzupassen, haben wir die “gesetzt“Breite"Eigenschaftswert als"300px”.
• Der "Rand"Eigenschaftswert wird als" festgelegt "Auto”, Dargestellt, dass der Rand von allen Seiten gleich ist. Der "unten obenEigenschaft kann auch zu diesem Zweck verwendet werden.

CSS

.H_line
Grenzboden: 6PX Solid RGB (80, 80, 78);
Breite: 300px;
Rand: Auto;

Speichern Sie nun die HTML -Datei und öffnen Sie sie in Ihrem Browser:

Wie Sie sehen können, haben wir eine horizontale Linie erfolgreich mit dem CSS -Grenzeigenschaften gezogen.

Beispiel 2: vertikale Linie mit CSS zeichnen
Um eine vertikale Linie zu zeichnen, werden wir hinzufügen

Tag für die Überschrift und platzieren Sie dann einen Namen “v_line”In der oben beschriebenen Div der HTML-Datei.

Html

Vertikale Linie

Lassen Sie uns das angebenv_line”Div mit einigen CSS -Eigenschaften. Um eine vertikale Linie zu zeichnen, werden wir verwenden:

• Der "Grenz-links"Eigenschaft wird mit Werten zugewiesen"5px fester RGB (2, 99, 135)Wenn der erste Wert die Linienbreite darstellt, repräsentiert der zweite Wert den Zeilenart, und der dritte Wert gibt die Farbe an.
• Der "unten rechtsEigenschaft kann auch für denselben Zweck verwendet werden.
• Als nächstes haben wir die "definiert"Höhe”Der Zeile, indem Sie ihren Wert als" festlegen "festlegen100px”.
• Satz "Rand" als "0 Auto”, Wobei 0 das obere und unten angibt und automatisch den gleichen Rand nach links und rechts darstellt.
• Um die Breite der Linie zu zeigen, haben wir die “zugewiesen“Breite"Eigenschaftswert als"2px”.

CSS

.v_line
Border-Links: 5PX Solid RGB (2, 99, 135);
Höhe: 100px;
Rand: 0 Auto;
Breite: 2px;

Das Anwenden dieser Werte zeichnet eine vertikale Linie wie folgt:

Das ist es! Wir haben verschiedene CSS -Eigenschaften verwendet, um horizontale und vertikale Linien zu zeichnen.

Abschluss

Du kannst den ... benutzen "Grenze" oder "GrenzbodenEigenschaften zum Zeichnen einer horizontalen Linie und der “Grenz-links" oder "GrenzrechteEigenschaften zum Zeichnen einer vertikalen Linie in CSS. Diese Eigenschaft hat Werte eins bis drei, wobei der erste Wert die Breite definiert, der zweite Wert seinen Typ definiert, ob fest, gepunktet, gestrichelt oder Rille, und der dritte Wert gibt die Farbe der Linie an. Diese Anleitung hat erklärt, wie man horizontale und vertikale Linien mit CSS zeichnet.