Wie man eine gepunktete Linie mit CSS zeichnet

In der Webentwicklung kann der Benutzer Linien in verschiedenen Stilen verfolgen, einschließlich Fluglinien, Armaturenbrettleitungen, gepunkteten Linien usw. Traditionell geben gepunktete oder gestrichelte Linien alles an, was skizziert oder ausgeschnitten werden kann. Sie wurden in der Vergangenheit in digitale Umgebungen an Platzhalter oder unentwickeltes Material verbunden. Darüber hinaus können diese Zeilen Positionen für Drag & Drop-Operationen und Datei-Uploads bezeichnen.

In diesem Artikel werden die Methode zum Zeichnen einer gepunkteten Linie mit CSS erklärt.

Wie man eine gepunktete Linie mit CSS zeichnet?

Um eine Zeile in HTML zu zeichnen, können Benutzer die „verwenden“

---

" Schild. Der "

---

Element zeichnet eine horizontale Zeile auf der Webseite. Darüber hinaus kann diese Linie durch CSS unterschiedlich gestaltet werden.

Probieren Sie die angegebene Prozedur aus, um eine gepunktete Zeile auf der Webseite mit CSS zu zeichnen.

Schritt 1: Erstellen Sie einen Div -Container

Verwenden Sie zuerst die “”Tag zum Erstellen eines Containers auf der HTML -Seite. Dann fügen Sie eine hinzu “Ausweis”Attribut im Eröffnungs -Tag„ Div “, um später darauf zugreifen.

Schritt 2: Fügen Sie Textdaten ein

Als nächstes Einbetten von Textdaten in den Container „Div“ einbetten.

Schritt 3: Hinzufügen “

---

" Schild

Füge hinzu ein "

---

”Tag zum Einfügen einer einfachen Zeile in eine Webseite einfügen. Dann einen Text nach der Zeile einbetten:

Willkommen auf der LinuxHint -Website

---

LinuxHint Ltd UK

Es ist zu bemerken, dass die Linie erfolgreich hinzugefügt wurde:

Schritt 4: Stil „Div“ -Stil -Behälter

Greifen Sie mit Hilfe des "ID" -Auskurs auf den "Div" -Container zu "#"Und der Wert der ID als"#gepunktete Linie”. Wenden Sie danach die folgenden CSS -Eigenschaften an:

#gepunktete Linie
Grenze: Keine;
Farbe: RGB (7, 189, 245);
Rand: PX 60px;

Hier:

• • “Grenze”Fügt eine Grenze um das Element hinzu.
  • “Farbe”Wird verwendet, um die Farbe des Textes im Element anzugeben.
  • “Rand”Wird verwendet, um Platz außerhalb der definierten Grenze hinzuzufügen.

Ausgang

Schritt 5: Stil “

---

" Element

Greifen Sie zuerst zuerst auf die “zu, um eine Liste als gepunktete Linie zu erstellenHRElement nach Tag -Name und anwenden Sie die unten aufgeführten CSS -Eigenschaften:

HR
Hintergrundfarbe: RGB (243, 192, 192);
Border-Top: 3px-gepunktete RGB (10, 53, 245);
Höhe: 3px;
Breite: 50%;

Nach dem angegebenen Code -Snippet:

• • “HintergrundfarbeEigenschaft gibt die Farbe an der Rückseite des Elements an.
  • “Grenze”Wird verwendet, um die horizontale Linie zu verpunktzen.
  • “Höhe" Und "BreiteWerden verwendet, um die Größe des Elements zu bestimmen:

Es kann beobachtet werden, dass wir erfolgreich eine gepunktete Linie gezogen haben.

Abschluss

Um eine gepunktete Linie mit CSS zu zeichnen, fügen Sie zunächst eine einfache Linie mit Hilfe des "

---

" Schild. Dann greifen Sie auf die “zu"

---

Element nach Tag -Namen in CSS. Danach anwenden Sie die “Grenze" oder "GrenzbodenEigenschaft und geben ihren Wert als “angepunktet”. Dieser Beitrag hat die Methode zum Zeichnen der gepunkteten Linie in HTML mit CSS erklärt.