css : Comment définir la transparence de box-shadow ?

Aujourd'hui, j'ai découvert que l'utilisation de l'attribut box-shadow peut très bien ajouter un effet d'ombre à p, mais si l'effet ajouté est :

-moz-box-shadow:0 4px 4px #999; 
-webkit-box-shadow:0 4px 4px #999; 
box-shadow:0 4px 4px #999;

La couleur définie en utilisant # n'a pas d'effet transparent. Définissez la couleur de l'ombre de cette manière. Si l'endroit où tombe l'ombre n'est pas blanc, ni même dynamique, par exemple si elle tombe sur une diapositive, plusieurs images de couleurs différentes pivoteront. Ensuite, en définissant la couleur de l'ombre comme ceci, l'effet d'ombre paraîtra faux !

Solution : utilisez plutôt rgba.

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

Je voudrais expliquer ici :

ie6 et ie7 ne devraient pas prendre en charge l'attribut box-shadow.

Vous pouvez utiliser : *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); au lieu de

Depuis l'ombre que j'ai définie n'est pas Il n'est pas obligatoire de s'afficher dans tous les navigateurs. Je n'ai donc pas ajouté cette ligne de code, donc je n'ai pas vérifié s'il était possible de remplacer la couleur dans Color="#888888" par rgba ici. Les amis qui en ont besoin peuvent le vérifier par eux-mêmes. ennuyeux!

Mes principes :

Tant qu'il n'y a pas de problèmes tels qu'un désalignement de la mise en page, je n'apporterai pas de modifications de compatibilité.

Pour le petit nombre d'irréductibles qui ne mettent pas à jour leur navigateur, il n'est pas nécessaire d'ajouter une ligne de code redondante puisque vous utilisez une ancienne version du navigateur, il est certain que l'effet. tu vois, ce n'est pas assez beau.

La raison pour laquelle de nombreuses anciennes versions des navigateurs IE existent encore aujourd'hui est qu'elles sont habituées au front-end !

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!