Comment définir l'ombre des lignes horizontales en CSS-tutoriel CSS-php.cn

Comment définir l'ombre des lignes horizontales en CSS

WBOY

Libérer： 2021-12-08 16:49:55

original

3276 Les gens l'ont consulté

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.

Comment définir l'ombre des lignes horizontales en CSS

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;

Copier après la connexion

Où :

Comment définir lombre des lignes horizontales en CSS

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>

Copier après la connexion

Résultat de sortie :

Comment définir lombre des lignes horizontales en CSS