Comment obtenir un effet de dégradé de couleurs en CSS3

Comment obtenir un effet de dégradé de couleurs en CSS3 : vous pouvez utiliser la fonction de dégradé linéaire et la fonction de dégradé radial pour obtenir respectivement un effet de dégradé linéaire et un effet de dégradé radial, tels que [dégradé linéaire (jaune, vert)] .

Il existe deux types de dégradés CSS3 : le dégradé linéaire CSS3 et le dégradé radial CSS3.

(Partage de vidéos d'apprentissage :tutoriel vidéo CSS)

1. Dégradé de couleur à dégradé linéaire

Fonction :

dégradé linéaire La fonction () est utilisée pour créer une image qui représente un dégradé linéaire de deux couleurs ou plus.

Syntaxe :

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Valeur :

• direction Utilisez la valeur d'angle pour spécifier la direction (ou l'angle) du dégradé.

• color-stop1, color-stop2,... Utilisé pour spécifier les couleurs de début et de fin du dégradé.

Exemple :

      
  
线性渐变 - 从上到下
 
  

2. Fonction de dégradé radial

la fonction radial-gradient() utilise le dégradé radial Créer " image".

Le dégradé radial est défini par le point central.

Pour créer un dégradé radial, vous devez définir deux couleurs d'arrêt.

Syntaxe :

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Valeur :

1. forme Déterminer le type de cercle

• ellipse (Par défaut) : Spécifie un dégradé radial elliptique.

• cercle : Préciser le dégradé radial du cercle

2. taille Définir la taille du dégradé, valeurs possibles :

• coin le plus éloigné (par défaut) : spécifie la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au coin le plus éloigné du centre du cercle

• closest-side : spécifie le dégradé radial. La longueur du rayon va du centre du cercle jusqu'au côté le plus proche du centre

• closest-corner : spécifie la longueur du rayon du dégradé radial du centre du cercle à l'angle le plus proche du centre

• côté le plus éloigné : Spécifiez la longueur du rayon du dégradé radial du centre du cercle jusqu'au côté le plus éloigné du centre du cercle.

3. Position définit la position du dégradé. Valeurs possibles :

• center (par défaut) : définissez la valeur de l'ordonnée au centre du cercle de dégradé radial.

• haut : définissez le haut comme étant la valeur ordonnée du centre du cercle de dégradé radial.

• bas : définissez le bas sur la valeur ordonnée du centre du cercle de dégradé radial.

4. start-color, ..., last-color est utilisé pour spécifier les couleurs de début et de fin du dégradé.

Exemple :

      
  
径向渐变
 
  

Recommandations associées :Tutoriel CSS

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!