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

Explication détaillée de la façon d'écrire un dégradé compatible avec plusieurs navigateurs

零下一度
Libérer: 2017-05-18 10:18:56
original
2058 Les gens l'ont consulté

Pour être compatible avec plusieurs navigateurs, vous devez écrire le CSS correspondant pour chaque navigateur. Les navigateurs avec une version trop basse ne peuvent utiliser que des images comme arrière-plan. Ce qui suit est la prise en charge du dégradé par les cinq principaux actuels. navigateurs. Il arrive souvent que nous devions utiliser des arrière-plans dégradés. Utiliser des images longues est un peu trop impudique, j'ai donc écrit un petit exemple pour être compatible avec plusieurs navigateurs, nous devons écrire le CSS correspondant pour chaque navigateur, ce qui est trop faible. niveau pour les navigateurs. Seules les images peuvent être utilisées comme arrière-plan.
Voici la prise en charge actuelle du dégradé dans les cinq principaux navigateurs

Le code est le suivant :

<style type="text/css" media="screen"> 
#gradient { 
width: 200px; 
height: 200px; 
/* 如果浏览器不支持渐变,使用图像作为背景 */ 
background: url(gradient.jpg); 
/* Webkit: Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900)); 
/* Webkit: Safari 5.1+, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #ff6600, #339900); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(top, #ff6600, #339900); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(top, #ff6600, #339900); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #ff6600, #339900); 
/* IE < 10 */ 
/* 注意:这一行必须写在最后 */ 
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} 
</style>
Copier après la connexion

Le code est le suivant :

<p id="gradient"></p>
Copier après la connexion

Quand n’y a-t-il pas eu IE6, quand le monde sera-t-il considéré comme paisible ? Merde IE.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo CSS en ligne gratuit

3 php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS

4. Compréhension approfondie des dégradés CSS3 (Gradients)

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!

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal