Quelles sont les propriétés de dégradé de CSS3 ?

变 L'attribut de dégradé CSS3 est un nouvel attribut de la spécification CSS3. Il nous permet de créer un riche effet de dégradé de couleurs sur la page Web, ajoutant plus de beauté et d'effets visuels à la page Web. Ensuite, introduisons le contenu spécifique des propriétés de dégradé CSS3.

Les propriétés des dégradés CSS3 sont divisées en dégradés linéaires et dégradés radiaux, et les dégradés linéaires sont divisés en directions horizontales et verticales.

1. Attributs du dégradé linéaire

1. Dégradé linéaire horizontal

Syntaxe : arrière-plan : dégradé linéaire (à droite, #00FFFF, #FF00FF);

Analyse : à droite signifie dégradé de gauche à droite, #00FFFF et #FF00FF représente des couleurs changeantes et plusieurs ensembles de valeurs de couleur peuvent être définis.

2. Dégradé linéaire vertical

Syntaxe : arrière-plan : dégradé linéaire (vers le bas, #00FFFF, #FF00FF);

Analyse : vers le bas signifie dégradé de haut en bas, #00FFFF et #FF00FF signifient un changement de couleur, vous peut définir plusieurs ensembles de valeurs de couleur.

2. Attributs du dégradé radial

La syntaxe du dégradé radial est similaire à celle du dégradé linéaire. Il existe également deux catégories : la valeur de longueur du rayon et deux mots-clés de position. Parmi eux, le mot-clé de première position représente le centre du cercle, la gauche est une valeur négative dans la direction de l'axe x, la valeur droite est une valeur positive, la direction de l'axe y est une valeur négative et le bas est une valeur positive. valeur positive ; le deuxième mot-clé de position représente la position de départ du dégradé. Les règles pour les valeurs sont les mêmes que pour le premier mot-clé de position.

1. La valeur de longueur du rayon

Syntaxe : background: radial-gradient(ellipse farthest-corner at 45px 45px, #00FFFF, #FF00FF);

Analyse : l'ellipse est exprimée sous la forme d'une ellipse et du coin le plus éloigné. est exprimé par l'angle le plus éloigné, 45px et 45px sont les coordonnées centrales du cercle, #00FFFF et #FF00FF représentent la couleur du dégradé et plusieurs ensembles de valeurs de couleur peuvent être définis.

2. Deux mots-clés de position

Syntaxe : background : radial-gradient(en haut à gauche, #00FFFF, #FF00FF) ;

Analyse : en haut à gauche signifie que le centre du dégradé est dans le coin supérieur gauche, #00FFFF et #FF00FF signifie Pour changer les couleurs, plusieurs ensembles de valeurs de couleur peuvent être définis.

Ce qui précède est une introduction détaillée à l'attribut de dégradé CSS3. Vous pouvez créer de nombreux effets sympas en utilisant l'attribut de dégradé CSS3. Il joue un grand rôle dans l'embellissement des pages Web.

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!