Maison > Article > interface Web > Comment dessiner des lignes horizontales et verticales en utilisant CSS
Comment dessiner des lignes horizontales et verticales en utilisant CSS
- WBOYoriginal
- 2021-12-06 18:29:416323parcourir
Méthode de dessin : 1. Ajoutez le style "largeur : valeur de longueur de ligne horizontale ; hauteur : valeur d'épaisseur de ligne horizontale ; arrière-plan : couleur de ligne horizontale" à l'élément pour dessiner la ligne horizontale ; 2. Ajoutez "largeur : valeur d'épaisseur de ligne verticale ; ; hauteur : valeur de longueur de ligne verticale ; arrière-plan : style de couleur de ligne verticale pour dessiner des lignes verticales.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment dessiner des lignes horizontales et verticales en utilisant CSS
En CSS, nous pouvons obtenir l'effet de dessiner des lignes horizontales et verticales en définissant la taille d'un élément div vide et en le remplissant de couleur.
Par exemple, nous pouvons définir la longueur du div sur la longueur de la ligne horizontale, la largeur du div sur l'épaisseur de la ligne horizontale, puis le remplir avec la couleur d'arrière-plan.
L'exemple est le suivant :
<!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>Résultat de sortie :
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!