Explication détaillée de la façon d'écrire une couleur de dégradé CSS

Le dégradé de couleurs CSS est une technologie couramment utilisée dans la conception de sites Web. Elle peut rendre la transition de couleur de la page plus naturelle et peut également améliorer la beauté et l'expressivité de la page. Laissez-moi vous présenter comment écrire des couleurs de dégradé CSS.

1. Dégradé linéaire

1. Définir la direction du dégradé

Avant de définir un dégradé linéaire, vous devez d'abord considérer la direction du dégradé. Par défaut, le dégradé linéaire va de haut en bas, ce qui correspond à la direction verticale, et cette direction peut être modifiée en définissant la valeur de l'angle.

• Si vous souhaitez un dégradé dans le sens horizontal, vous pouvez définir la valeur d'angle correspondante, par exemple, 0 degré signifie de gauche à droite, 180 degrés signifie de droite à gauche, etc.
• Si vous souhaitez un dégradé diagonal, vous pouvez définir une valeur d'angle en degrés.

Voici quelques exemples de valeurs d'angle :

linear-gradient(0deg, #FFDAB9, #7FFFD4);
linear-gradient(90deg, #FFDAB9, #7FFFD4);
linear-gradient(45deg, #FFDAB9, #7FFFD4);

2. Pour définir la couleur du dégradé

Pour définir la couleur d'un dégradé linéaire, vous devez utiliser la fonction linear-gradient() . linear-gradient()函数。

background: linear-gradient(to right, #FFDAB9, #7FFFD4);

to right表示从左到右的水平方向渐变，后面跟上想要渐变的颜色即可。如果想给一个元素设置多种颜色的渐变，可以像下面这样写：

background: linear-gradient(to right, #FFDAB9, #7FFFD4, #FFDAB9);

二、径向渐变

径向渐变与线性渐变有些不同，它会从中间开始向外扩散，直至覆盖整个元素。定义径向渐变需要配置以下几个元素：

1. 渐变的形状

径向渐变可以被设置成圆形或椭圆形，以启用不同的形状。

background: radial-gradient(circle, #FFDAB9, #7FFFD4);
background: radial-gradient(ellipse, #FFDAB9, #7FFFD4);

2. 渐变的起点和终点

径向渐变有一个光源，并且颜色从该光源开始辐射的不同半径的圆形中扩散。因此，我们需要定义渐变的起点和终点。

background: radial-gradient(at center, #FFDAB9, #7FFFD4);

使用at center

background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);

à droite signifie un dégradé horizontal de gauche à droite, suivi de la couleur que vous souhaitez dégradée. Si vous souhaitez définir un dégradé de plusieurs couleurs pour un élément, vous pouvez l'écrire comme ceci :

background: radial-gradient(at center, #FFDAB9, #7FFFD4);

2. Dégradé radial

3. Un dégradé radial est quelque peu différent d'un dégradé linéaire. Il commencera du milieu et s'étendra vers l'extérieur. jusqu'à ce qu'il couvre tout l'élément. Définir un dégradé radial nécessite de configurer les éléments suivants :

Forme du dégradé

Un dégradé radial peut être défini sur un cercle ou une ellipse pour activer différentes formes. 🎜rrreee🎜🎜Points de début et de fin du dégradé🎜🎜🎜Un dégradé radial a une source de lumière et les couleurs sont diffusées à partir d'un cercle de rayons différents à partir duquel la source de lumière commence à rayonner. Par conséquent, nous devons définir les points de début et de fin du dégradé. 🎜rrreee🎜Utilisez le mot-clé at center pour définir la source de lumière au centre de l'élément. 🎜rrreee🎜L'utilisation de valeurs de coordonnées pour définir la position de la source lumineuse peut répondre à des besoins plus personnalisés. 🎜🎜🎜Contrôler la couleur du dégradé🎜🎜🎜Semblables aux dégradés linéaires, les dégradés radiaux doivent également spécifier la couleur du dégradé. 🎜rrreee🎜Ce qui précède explique comment écrire une couleur de dégradé CSS, qui peut être utilisée de manière flexible en fonction des besoins. 🎜

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!