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

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>

Le code est le suivant :

<p id="gradient"></p>

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!