Maison > interface Web > tutoriel CSS > Dégradés CSS : gradient-linéaire ()

Dégradés CSS : gradient-linéaire ()

Linda Hamilton
Libérer: 2024-12-27 16:18:10
original
594 Les gens l'ont consulté

Css gradients:linear-gradient()

La fonction CSS linear-gtradient() crée un dégradé linéaire comme arrière-plan
la syntaxe est :
un sélecteur CSS{
background-image:linear-gradient(angle,color1,color2,color3,......);
>

angle : facultatif est une référence à la direction du dégradé
par défaut, c'est 180 degrés
au lieu de deg, nous pouvons les utiliser comme mots-clés pour déterminer la direction :
*à droite : équivaut à 90 deg
**à gauche : équivaut à 270 deg
*
en haut : est égal à 0deg
**vers le bas : est égal à 180 degrés (est facultatif car le degré dans llinear-radient() est vers le bas
**color1 :obligatoire, cette valeur consiste en une valeur de couleur suivie de
un arrêt de couleur optionnel sur une ou deux positions (un pourcentage entre 0% et 100% ou une longueur le long de l'axe du dégradé).



dégradé {

hauteur : 200px ;
/* Un dégradé incliné à 45 degrés,
commencer bleu et finir rouge /
/

/*
background-image:linear-gradient(45deg, bleu, rouge);
*/

/* Un dégradé allant du coin inférieur droit vers le coin supérieur gauche,
commencer bleu et finir rouge /
/

/*
image d'arrière-plan : dégradé linéaire (en haut à gauche, bleu, rouge)
*/

image d'arrière-plan : dégradé linéaire (à droite, rouge, 50 %, bleu)

/*
Stop couleur multi-positions : Un dégradé incliné à 45 degrés,
avec une moitié rouge en bas à gauche et une moitié bleue en haut à droite,
avec une ligne dure où le dégradé passe du rouge au bleu
*/

/*
image d'arrière-plan : dégradé linéaire (
45 degrés,
rouge 0 50%,

bleu 50% 100%);

*/

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!

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