Heim > Artikel > Web-Frontend > So zeichnen Sie horizontale und vertikale Linien mit CSS
So zeichnen Sie horizontale und vertikale Linien mit CSS
- WBOYOriginal
- 2021-12-06 18:29:416350Durchsuche
Zeichnungsmethode: 1. Fügen Sie den Stil „Breite: horizontaler Linienlängenwert; Höhe: horizontaler Linienstärkenwert; Hintergrund: horizontale Linienfarbe“ zum Element hinzu, um die horizontale Linie zu zeichnen; 2. Fügen Sie „Breite: vertikaler Linienstärkenwert“ hinzu ; Höhe: Wert der vertikalen Linienlänge; Hintergrund: Stil der vertikalen Linie zum Zeichnen vertikaler Linien.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So zeichnen Sie horizontale und vertikale Linien mit CSS
In CSS können wir den Effekt des Zeichnens horizontaler und vertikaler Linien erzielen, indem wir die Größe eines leeren div-Elements festlegen und es mit Farbe füllen.
Zum Beispiel können wir die Länge des Div auf die Länge der horizontalen Linie einstellen, die Breite des Div auf die Dicke der horizontalen Linie und es dann mit der Hintergrundfarbe füllen.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:1px;
background-color:#000;
}
.div2{
width:1px;
height:100px;
background-color:#000;
}
</style>
</head>
<body>
<div class="div1"></div><br>
<div class="div2"></div>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo zeichnen Sie horizontale und vertikale Linien mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!