Page d'accueil>Tutoriel de conception de sites Web>Effets spéciaux Web

Tutoriel sur l'utilisation de la propriété CSS3 box-shadow

Auteur：Eve Cole Date de mise à jour：2010-05-14 17:29:27

La propriété box-shadow de CSS3 nous permet d'obtenir facilement des effets d'ombre de calque. Expliquons cet attribut en détail dans la pratique.

1. Compatibilité du navigateur avec l'attribut box-shadow

Examinons d'abord la compatibilité de cet attribut avec les navigateurs :

  • Opera : Je ne sais pas quelle version il a commencé à prendre en charge. Lorsque j'ai publié cet article à des fins de test, je viens de mettre à jour Opera vers la dernière version 10.53, qui prend déjà en charge l'attribut box-shadow.
  • Firefox prend en charge cela via la propriété privée -moz-box-shadow .
  • Safari et Chrome le prennent en charge via la propriété privée -webkit-box-shadow .
  • Non pris en charge par tous les IE (je ne sais pas si IE9 s'est amélioré). Ne vous inquiétez pas, nous présenterons quelques astuces pour IE à la fin de l'article.

2. Syntaxe de l'attribut box-shadow

box-shadow a six valeurs réglables :

img{box-shadow : Type d'ombre Déplacement de l'axe X Déplacement de l'axe Y taille de l'ombre extension de l'ombre couleur de l'ombre}

  • Lorsqu'aucun type d'ombre n'est défini, la valeur par défaut est l'effet d'ombre. Lorsqu'il est réglé en médaillon, il s'agit d'un effet d'ombre intérieure.
  • Les déplacements des axes X et Y ne sont pas équivalents mais similaires à "angle" et "position" dans Photoshop.
  • La taille, l'extension et la couleur de l'ombre sont les mêmes que dans Photoshop.

    3. Exemple d'analyse

    Examinons l'effet d'une ombre de boîte à travers plusieurs exemples. Tout d'abord, créons un code HTML simple pour tester :

    <html>
    <tête>
    <style type="text/css">Écrivez la partie CSS ici</style>
    </tête>
    <corps>
    <img src="test.jpg" />
    </corps>
    </html>

    Remarque : Pour éviter les problèmes, seul box-shadow est écrit dans le code CSS ci-dessous. En utilisation réelle, vous devez également écrire -moz-box-shadow et -webkit-shadow. Ce que vous devez faire est très simple, copiez deux box-shadows et ajoutez -moz- et -webkit- devant eux.

    img {
    -moz-box-shadow:2px 2px 10px #06C;
    -webkit-box-shadow:2px 2px 10px #06C;
    box-shadow:2px 2px 10px #06C;
    }
Articles connexes