Utilisez CSS3 pour implémenter la méthode de dégradé d'arrière-plan

Avant, je ne comprenais pas que CSS pouvait également être utilisé pour créer des dégradés d'arrière-plan, j'utilisais toujours PS pour appliquer des images de dégradé d'arrière-plan aux pages Web que je créais. Cependant, il n'y a pas si longtemps, j'ai appris que CSS3 pouvait également créer des dégradés d'arrière-plan. Il est devenu beaucoup plus facile de créer des effets de dégradé d'arrière-plan. Voici quelques méthodes pour créer des dégradés d'arrière-plan en CSS3.

1. Dégradé linéaire

//自上而下的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}

//从左往右的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}

Le premier paramètre est la direction de départ du dégradé, qui n'a pas besoin d'être suivie par la direction de fin du dégradé ; du dégradé peut être de haut en bas, ou de gauche à droite

Le deuxième paramètre est la couleur à laquelle commence le dégradé

Le troisième paramètre est la couleur à la fin de ; le dégradé.

2. Ajoutez le dégradé linéaire de la fonction stop()

p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}

Le code ci-dessus signifie : de 15% vers la gauche, à 50%, et puis à 85 %, enfin à droite, la séquence de dégradés de couleurs passe du bleu à #1a82f7, #2F2727, #1a82f7 puis au rouge.

3. Dégradé radial (du centre du cercle vers l'extérieur du cercle)

p{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}

La signification du code ci-dessus est : une couleur de du bleu au rouge, du centre du cercle au gradient radial de diffusion périphérique.

Si le cercle de paramètre est modifié en ellipse, ce sera un dégradé radial elliptique.

4. Dégradé d'arrière-plan face au navigateur IE

Le navigateur IE ne peut utiliser que le propre filtre d'IE pour obtenir un dégradé.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

Le premier paramètre : la couleur de la position de départ du dégradé ;

Le deuxième paramètre : la couleur de la position finale du dégradé ;

Le troisième paramètre : le type de dégradé, 0 représente le dégradé vertical, 1 représente le dégradé horizontal.

Remarque : le paramètre de dégradé d'arrière-plan du navigateur IE n'a pas besoin d'être défini sur l'arrière-plan, utilisez simplement le filtre directement.

Bien que la fonction de dégradé d'arrière-plan de CSS3 soit puissante, il existe également des problèmes de compatibilité avec les navigateurs. La prise en charge spécifique actuelle de l'attribut de dégradé d'arrière-plan CSS3 est : IE10, FireFox3.6+, Safari4.0+, Chrome, Opera11.1 (le dégradé radial n'est pas encore pris en charge)+, IOS 3.2+, Opera Mobile11.1, Android. Par conséquent, nous devons faire attention à la compatibilité du navigateur lorsque nous utilisons CSS3 pour créer des dégradés d’arrière-plan.

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!