Maison > interface Web > tutoriel CSS > le corps du texte

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

Susan Sarandon
Libérer: 2024-11-06 12:06:02
original
496 Les gens l'ont consulté

How to Create Box Shadows in IE7 and 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;
}
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!