Explication détaillée sur l'utilisation de l'attribut box-shadow en CSS3

Chaque fois que vous utilisez box-shadow, vous devez vérifier les informations pour obtenir l'effet correspondant. Résumons-les maintenant pour pouvoir vous y référer facilement plus tard.

1. Grammaire :

E {box-shadow : inset x-offset y-offset blur-radius spread-radius color} ;
E {box-shadow: projection method ：

1. Type d'ombre : Ce paramètre est facultatif. La méthode de projection par défaut est l'ombre extérieure si la seule valeur "encart" est prise, la méthode de projection par défaut. l'ombre extérieure sera transformée en ombre intérieure ;

2. Décalage Y : fait référence au décalage vertical de l'ombre. Sa valeur peut également être positive ou négative. Pour les valeurs positives, l'ombre est en bas de. l'objet. Pour les valeurs négatives, l'ombre est en haut de l'objet ;

4. Rayon de flou de l'ombre : Ce paramètre est facultatif et ne peut être que positif. Si sa valeur est 0, cela signifie que l'ombre. n'a pas d'effet de flou. Plus la valeur est grande, plus le bord de l'ombre est flou

5. Rayon d'expansion de l'ombre : Ce paramètre est facultatif, et sa valeur peut être positive ou négative ; , toute l'ombre sera agrandie, sinon, elle sera réduite

6. Couleur de l'ombre : Ce paramètre est facultatif, lorsqu'aucune couleur n'est définie, le navigateur prendra la couleur par défaut, mais la couleur par défaut de chacun Le navigateur est différent, en particulier les navigateurs Safari et Chrome sous le noyau Webkit seront incolores, c'est-à-dire transparents. Il est recommandé de ne pas omettre ce paramètre.

3. Comment écrire des

navigateurs compatibles

 :

Comme text-shadow, box-shadow peut utiliser une ou plusieurs projections. Si plusieurs projections sont utilisées, elles doivent être séparées par des virgules ",".

4.

Le filtre IE simule l'effet d'ombre de boîte

<span style="color: #800000;"><span style="color: #000000;">//Firefox4.0-</span><br/><span style="color: #ff6600;">-moz-box-shadow:</span> <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span><br/><span style="color: #000000;">//Safari and Google chrome10.0-</span><br/><span style="color: #ff6600;">-webkit-box-shadow:</span> <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span><br/><span style="color: #000000;">//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9</span><br/><span style="color: #ff6600;">box-shadow:</span>  <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span></span>

Syntaxe de base : filter:progid:DXImageTransform.Microsoft.Shadow(color='color value', Direction = Angle d'ombre (valeur numérique),Strength=Rayon de l'ombre (valeur numérique));

Remarque:

1. Ce filtre doit être utilisé avec l'attribut d'arrière-plan, sinon le filtre n'est pas valide ;

2. Les attributs de couleur dans le filtre doivent être entièrement écrits et les abréviations ne peuvent pas être utilisées

3. L'ombre du filtre est calculée dans la largeur et la hauteur ; 4. Sous l'ombre de la boîte, la boîte ajoutera automatiquement overflow:hidden

5 Codes d'implémentation de l'ombre couramment utilisés

 :

Voir les effets spécifiques Photo ci-dessous :

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!