Maison > Article > interface Web > Comment utiliser box-shadow en CSS3 pour créer une ombre de bordure ? (tutoriel de code)

Comment utiliser box-shadow en CSS3 pour créer une ombre de bordure ? (tutoriel de code)

云罗郡主avant: 2018-10-23 16:59:352504parcourir

Le contenu de cet article explique comment utiliser box-shadow en CSS3 pour créer une ombre de bordure ? (Tutoriel de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Introduction à l'attribut box-shadow

L'ombre de bordure est un effet spécial très courant.

Auparavant dans CSS2.1, si vous vouliez ajouter une ombre de bordure à un élément (comme l'image ci-dessus), vous ne pouviez le faire qu'à travers une image d'arrière-plan.

En CSS3, nous pouvons facilement ajouter des effets d'ombre aux éléments en utilisant la propriété box-shadow.

Syntaxe :

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

Description :

(1) x-shadow : Définissez la position de l'ombre horizontale (axe X), les valeurs négatives peuvent être utilisé ;

(2) y-shadow : définissez la position de l'ombre verticale (axe y), vous pouvez utiliser des valeurs négatives

(3) flou : définissez le rayon de flou de l'ombre ; ;

(4) propagation : élargir le rayon, définir la taille de l'ombre

(5) couleur : définir la couleur de l'ombre

(6) encart : ce paramètre n'est pas défini par défaut. La valeur par défaut est l'ombre extérieure, l'encart signifie l'ombre intérieure.

Exemple :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:5px 5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

L'effet d'aperçu dans le navigateur est le suivant :

Comment utiliser box-shadow en CSS3 pour créer une ombre de bordure ? (tutoriel de code)

Position de l'ombre horizontale x- ombre et position verticale de l'ombre y-shadow

La valeur d'attribut de la position horizontale de l'ombre x-shadow et de la position verticale de l'ombre y-shadow, l'unité peut être px, em ou pourcentage, etc., valeurs négatives sont autorisés.

Par exemple :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:-5px -5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

L'effet d'aperçu dans le navigateur est le suivant :
Comment utiliser box-shadow en CSS3 pour créer une ombre de bordure ? (tutoriel de code)

Ce qui précède explique comment utiliser box-shadow dans CSS3 pour créer une ombre de bordure ? (Tutoriel de code) introduction complète, si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment s'assurer que la largeur et la hauteur de l'image sur la page maintiennent toujours un rapport de 16:9Article suivant：Comment s'assurer que la largeur et la hauteur de l'image sur la page maintiennent toujours un rapport de 16:9

Articles Liés

Voir plus