Comment créer des ombres de boîte dans IE7 et IE8 ?

Box Shadow dans IE7 et IE8 : un guide complet

Réaliser des ombres de boîte dans IE7 et IE8 peut poser des défis, mais une solution viable réside dans CSS3 TARTE. En émulant les propriétés CSS3 dans ces navigateurs, CSS3 PIE permet aux développeurs d'implémenter facilement des ombres de boîte.

Code CSS pour Box Shadow

Pour appliquer une ombre de boîte colorée à un div, utilisez le CSS suivant :

.bright {
    position: absolute;
    z-index: 1; 
    box-shadow: 0px -3px 55px 20px #147197;
}

Solutions IE uniquement

Bien que le code CSS ci-dessus fonctionne dans IE9 et versions ultérieures, il ne prend pas en charge box ombres dans IE7 et IE8. Pour résoudre ce problème, vous pouvez utiliser :

fichier ie-css3.htc : Ce fichier fournit une prise en charge de base des ombres dans IE, mais il ne crée que des ombres noires.

filter : progid:DXImageTransform.Microsoft.Shadow :Cette méthode crée une ombre directionnelle, qui peut ne pas être idéale pour les ombres omnidirectionnelles.

CSS3 PIE

La solution la plus efficace pour les ombres de boîte dans IE7 et IE8 est CSS3 PIE. Cet outil émule la propriété box-shadow en utilisant une combinaison de HTML et de JavaScript. Il prend en charge toutes les propriétés de box-shadow à l'exception du mot-clé "inset".

Pour utiliser CSS3 PIE, téléchargez la bibliothèque et incluez-la dans votre fichier HTML :

<script src="PIE.htc"></script>

Après avoir inclus le bibliothèque, vous pouvez appliquer des ombres de boîte comme d'habitude. CSS3 PIE gérera automatiquement l'émulation dans IE7 et IE8.

Conclusion

Les ombres de boîte peuvent être implémentées dans IE7 et IE8 à l'aide de CSS3 PIE. Cet outil offre une excellente prise en charge des propriétés box-shadow, ce qui en fait une solution fiable pour ajouter de la profondeur visuelle aux éléments Web.

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!