CSS est un langage de conception de style de page Web couramment utilisé qui peut obtenir divers effets magnifiques. Parmi eux, l’effet dégradé est une technique couramment utilisée par de nombreux web designers et peut être réalisée grâce au CSS. Cet article explique comment utiliser CSS pour obtenir des effets de dégradé, notamment des dégradés linéaires et des dégradés radiaux.
1. Dégradé linéaire
Le dégradé linéaire fait référence au processus de changement progressif des couleurs dans une direction. Nous pouvons obtenir cet effet grâce à la propriété de gradient linéaire du CSS.
La méthode d'implémentation spécifique est la suivante :
< ;div class="box">
.box {
width: 300px; height: 200px; background: linear-gradient(to right, #03a9f4, #f44336);
}
linear-gradient a deux paramètres Le premier paramètre est la direction, prenant en charge vers la gauche, vers la droite et vers le bas. , et en haut , en bas à gauche, etc. spécifiez la direction. Le deuxième argument est un tableau de valeurs de couleur, séparées par des virgules. Les valeurs de couleur dans ce tableau représentent le dégradé de couleur du point de départ au point final du dégradé.
Par exemple, le code suivant représente un dégradé linéaire de gauche à droite. Le point de départ du dégradé est #03a9f4 et le point final est #f44336 :
background : gradient-linéaire(à droite, #03a9f4, #f44336);
Nous pouvons également définir plusieurs valeurs de couleur pour rendre le dégradé de couleurs plus fluide :
background: linéaire- dégradé(à droite, #03a9f4, #2196f3, #9c27b0, #f44336);
De cette façon, il y aura quatre transitions de couleurs différentes de gauche à droite.
2. Dégradé Radial
Le dégradé radial fait référence au processus de dégradé de couleur commençant à partir d'un point central et se déplaçant progressivement. Nous pouvons également obtenir cet effet via CSS.
La méthode d'implémentation spécifique est la suivante :
< ;div class="box">
.box {
width: 300px; height: 200px; background: radial-gradient(circle at center, #03a9f4, #f44336);
}
radial-gradient a trois paramètres Le premier paramètre spécifie le type de dégradé, prenant en charge le cercle (cercle) et l'ellipse (. forme d'ellipse). Le deuxième paramètre spécifie la position du centre du dégradé, en utilisant la syntaxe "Position de l'axe X Position de l'axe Y". Par exemple, "centre centre" signifie commencer le dégradé au centre de l'élément.
Le troisième paramètre spécifie un tableau de valeurs de couleurs dégradées, également séparées par des virgules.
Par exemple, le code suivant représente un dégradé radial partant du centre. Le point de départ du dégradé est #03a9f4 et le point final est #f44336 :
background : radial-gradient(circle at center , #03a9f4, #f44336);
Nous pouvons également définir plusieurs valeurs de couleur pour rendre le dégradé plus fluide :
background: radial- dégradé(cercle au centre, #03a9f4 , #2196f3, #9c27b0, #f44336);
De cette façon, pendant le processus de dégradé partant du centre vers les environs, la couleur changera progressivement de de la première valeur à la dernière valeur et suivez le processus de dégradé au milieu.
3. Autres dégradés
CSS prend également en charge d'autres types de dégradés, tels que les dégradés répétitifs, les dégradés irréguliers, etc. Les méthodes d'implémentation de ces types de dégradés sont également similaires et peuvent être obtenues en définissant les attributs de style.
Par exemple, le code suivant représente un dégradé linéaire répétitif :
background : répétition-linéaire-gradient(à droite, #03a9f4, #2196f3-20px, #f44336 40px );
Dans ce code, le point de départ du dégradé de couleurs est #03a9f4 et le point final est #f44336. Le changement de couleur sera répété jusqu'à ce que tout l'élément soit rempli. Parmi eux, "#2196f3-20px" signifie que cette valeur de couleur sera réduite de 20 pixels dans la direction de l'axe x, formant ainsi un effet décalé.
4. Résumé
L'effet dégradé du CSS peut rendre la conception de la page Web plus vivante et accrocheuse. Cet article explique comment implémenter des dégradés linéaires et radiaux, ainsi que des exemples de code pour plusieurs autres types de dégradés. J'espère que cela aide tout le monde.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
