Maison > Article > interface Web > Comment définir l'ombre des lignes horizontales en CSS
Comment définir l'ombre des lignes horizontales en CSS
- WBOYoriginal
- 2021-12-08 16:49:553300parcourir
Comment définir l'ombre de la ligne horizontale en CSS : 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 ; "box-shadow : position de l'ombre horizontale et position de l'ombre verticale ; "style définit simplement l'ombre de l'élément de ligne horizontale.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir l'ombre des lignes horizontales en CSS
Dans l'article précédent "Comment dessiner des lignes horizontales et verticales en utilisant CSS", nous avons expliqué comment dessiner des lignes horizontales via CSS. sur comment les lignes horizontales ajoutent une ombre.
En CSS, vous pouvez utiliser l'attribut box-shadow pour définir l'ombre de la ligne horizontale. L'attribut box-shadow ajoute une ou plusieurs ombres à la boîte.
La syntaxe est :
box-shadow: h-shadow v-shadow blur spread color inset;
Où :
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:200px;
height:3px;
background-color:#000;
box-shadow: 10px 5px 5px #888888;
}
</style>
</head>
<body>
<div class="div1"></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!