Un aperçu des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir des effets d'ombre

Aperçu des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir des effets d'ombre

Introduction :
Avec le développement continu de CSS3, les concepteurs de sites Web modernes peuvent facilement obtenir des effets qui n'étaient auparavant possibles que grâce à la technologie d'image via du CSS pur . L'un d'eux est l'effet d'ombre. Cet article présentera les propriétés d'ombre de CSS3 et fournira des exemples de code pour vous aider à utiliser CSS3 pour obtenir des effets d'ombre.

Propriété d'ombre CSS3 :
Avec la propriété box-shadow de CSS3, nous pouvons ajouter un effet d'ombre aux éléments HTML. Cette propriété nous permet de spécifier le décalage, le flou, la répartition et la couleur de l'ombre. Voici la syntaxe de l'attribut box-shadow :

box-shadow : h-shadow v-shadow blur spread color

où :

• h-shadow spécifie le décalage horizontal de l'ombre, qui peut être un valeur négative ;
• v-shadow spécifie le décalage vertical de l'ombre, qui peut être une valeur négative ;
• blur spécifie le degré de flou de l'ombre, qui peut être 0 ;
• spread spécifie le degré d'expansion de l'ombre, qui peut être 0 ;
• color spécifie la couleur de l'ombre, prend en charge diverses méthodes de représentation des couleurs.

Exemple 1 : Effet d'ombre de base
L'exemple suivant montre comment ajouter un effet d'ombre de base via la propriété box-shadow de CSS3 :

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    }
</style>

< ;/head>

<div class="box">
    这是一个带有阴影的盒子
</div>

Dans l'exemple ci-dessus, nous avons implémenté un effet d'ombre de base en ajoutant l'attribut box-shadow à l'élément .box . L'ombre a un décalage horizontal et vertical de 0, un flou de 10 px, une répartition de 5 px et une couleur rgba (0, 0, 0, 0,3).

Exemple 2 : effets d'ombre multiples
L'attribut box-shadow prend également en charge l'ajout de plusieurs effets d'ombre à un élément. L'exemple suivant montre comment ajouter un effet multi-ombres via la propriété CSS3 box-shadow :

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3),
                    0px 0px 5px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="box">
    这是一个带有多重阴影的盒子
</div>

Dans l'exemple ci-dessus, nous avons obtenu un effet avec plusieurs ombres en ajoutant deux paramètres d'ombre à la propriété box-shadow. La première ombre est plus floue et plus claire, tandis que la seconde ombre est moins floue et plus sombre.

Conclusion :
Avec la propriété box-shadow de CSS3, nous pouvons facilement ajouter des effets d'ombre aux éléments HTML sans utiliser de techniques d'image. Nous pouvons obtenir différents styles d'effets d'ombre en ajustant le décalage, le flou, l'expansion et la couleur de l'ombre. J'espère que cet article pourra vous aider à apprendre à utiliser CSS3 pour obtenir des effets d'ombre.

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!