CSSlinear-gradient et radial-gradient

J'ai déjà utilisé de nombreuses propriétés CSS3, mais je les ai vite oubliées car beaucoup d'entre elles sont compliquées à retenir, je veux donc écrire un blog pour faciliter leur mémorisation.
alors laissez-moi d'abord vous expliquer le dégradé de ligne :
image d'arrière-plan : dégradé linéaire (direction, pas de couleur 1, pas de couleur 2, ....)

• direction : utiliser l'angle pour indiquer la direction du dégradé dont les valeurs peuvent être un angle ou l'une d'entre elles : vers la gauche, vers la droite, vers le haut, vers le bas. vers le bas (180 degrés) est la valeur par défaut. 
• color-step : la couleur de début du dégradé, composée de deux parties : color : valeur de couleur CSS valide ; longueur ou pourcentage : la position de départ, n'autorisant pas de valeur négative

exemples (en supposant une hauteur : 100 px)
arrière-plan : dégradé linéaire (vers le bas, rouge 0 %, jaune 50 %, vert 100 %) ; idem pour l'arrière-plan : dégradé linéaire (180 degrés, rouge 0 px, jaune 50 px, vert 100 px) ;


repeatng-linear-gradient() : arrière-plan : répétition-linear-gradient (rouge 0, rouge 10 %, jaune 10 %, jaune 20 %) ;


Les paramètres représentent 0 % à 10 % du rouge au rouge, 10 % à 20 % du jaune au jaune, et répétez cet effet pour couvrir toute la taille de l'élément.

gradient radial()
ces paramètres de fonction se composent de cinq parties : la forme, la taille, la position du centre du cercle, la couleur, la position de la couleur.

• forme : ellipse (par défaut) ou cercle ;
• taille : je préfère l'appeler comme la direction croissante du rayon de gradient radial, avec des valeurs possibles : coin le plus éloigné (par défaut), coin le plus proche, côté le plus éloigné, côté le plus proche.
• position : la position centrale du dégradé radial, (50 %, 50 %) est la position par défaut ;
• couleur et position de la couleur : identique au dégradé linéaire ;

Cet effet est que la position centrale est située à (0,0) et que le rayon du dégradé est égal à la largeur de l'élément ;

Et répéter-radial-gradient() est identique à répéter-linéaire-gradient().

Enfin, il y a la compatibilité du dégradé linéaire et du dégradé radieux (plus d'informations à ce sujet sur le site CanIuse)

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!