tutoriel graphique css3 box-shadow shadow

Cet article présente principalement l'ombre box-shadow css3 (ombre extérieure et lueur extérieure). À travers cinq tests, les images montrent les différents effets de l'ombre dans différentes positions. Les amis dans le besoin peuvent s'y référer

Description de base :

Ombre extérieure : box-shadow : couleur Rpx de l'axe Y de l'axe X ;

Description de l'attribut (ordre correspondant) : Axe X de l'ombre (des valeurs négatives peuvent être utilisées) Axe Y de l'ombre (des valeurs négatives peuvent être utilisées) Valeur du flou de l'ombre (taille) Couleur de l'ombre

Ombre intérieure : box-shadow : axe X Encart de couleur Rpx de l'axe Y ;

La valeur par défaut est l'ombre extérieure Ombre intérieure : l'encart peut être défini sur l'ombre intérieure

Remarque (PS) : cet attribut est utilisé dans les modèles de boîte tels que (p,p ,h1,h2,h3,h4,h5, h6, etc.) n'est pas utilisé pour définir l'ombre du texte, veuillez vous référer au point de connaissance : text-shadow (même raison)

. Parce qu'il s'agit d'un nouvel attribut, afin d'être compatible avec les principaux navigateurs et de prendre en charge les navigateurs plus grands. Dans la version inférieure, lors de l'utilisation de l'attribut box-shadow sur les navigateurs grand public, nous devons écrire le nom de l'attribut sous la forme de

. Le navigateur Firefox doit être écrit sous la forme -webkit-box-shadow, Ouvrir le navigateur -moz-box-shadowIE>9 -o-box-shadow   -ms-box-shadow   

Exercices de base :

Afin de mieux comprendre les caractéristiques de box-shadow, faites quelques petits tests : (Pour faciliter l'imbrication des styles directement dans les balises)

Test 1 :

box-shadow: 0 0 10px #f00 (Comme les axes X et Y ne sont pas déplacés, la valeur du paramètre aura un effet sur la plage de rayon, la couleur)

Test 2 :

< /p> box- shadow:4px 4px 10px #f00; Différent du test 1, l'axe X et l'axe Y ont changé la valeur positive (la valeur positive va vers la droite et vers le bas), donc ça devient comme ça‍

Test 3 :

-4px -4px 10px #f00; Différent du test 2 La différence est que l'axe X et l'axe Y sont devenus des valeurs négatives (les valeurs négatives vont à gauche et vers le haut), donc ça devient comme ça‍

De même : vous pouvez tester la prochaine valeur positive, l'effet d'une valeur négative ne sera pas testé ici. . . . . . . .

Test 4 :

Test 5 : --inner shadow

box-shadow : 0px 0px 10px red inset; La seule différence est l'ajout d'un encart. Les autres attributs sont les mêmes que l'extérieur shadow. , une fois que vous l'aurez compris, vous connaîtrez le principe, et vous pourrez le réécrire à volonté. Avec l'effet d'animation de CSS3, le calque flash (mot) est très simple à mettre en œuvre. . J'espère que ça aide. .

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!