Comment définir la couleur du dégradé en CSS

Les méthodes de définition des couleurs de dégradé en CSS incluent : l'utilisation de Linear-gradient() pour créer des dégradés linéaires. Utilisez radial-gradient() pour créer un dégradé radial. Utilisez Repeating-linear-gradient() et Repeating-radial-gradient() pour créer des dégradés répétitifs.

Comment définir des couleurs dégradées à l'aide de CSS

Introduction
Les couleurs dégradées sont largement utilisées dans la conception Web et peuvent être utilisées pour créer des effets visuels accrocheurs. CSS propose diverses façons de définir les couleurs du dégradé.

Méthode 1 : Utilisezlinear-gradient()linear-gradient()
这是创建线性渐变的最简单方法。语法如下：

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

• direction：渐变的方向（例如，to bottom）
• color-stopN：渐变中的颜色停止点（由其位置和颜色指定）

示例：

linear-gradient(to bottom, #ff0000, #00ff00);

方法 2：使用radial-gradient()
此方法创建从中心点向外辐射的径向渐变。语法如下：

radial-gradient(shape, size, start-color, end-color);

• shape：渐变的形状（例如，circle或ellipse）
• size：渐变的大小（例如，100px）
• start-color：渐变中心的起始颜色
• end-color：渐变边缘的结束颜色

示例：

radial-gradient(circle, 100px, #0000ff, #ffffff);

方法 3：使用repeating-linear-gradient()和repeating-radial-gradient()
这些方法创建重复的渐变。语法与相应的linear-gradient()和radial-gradient()相似，但添加了repeating-

background: linear-gradient(to bottom, red, yellow); background-position: left top; background-size: 100% 50%; background-clip: content-box;

La direction du dégradé (par exemple, vers le bas)
• color-stopN :
Le point d'arrêt de la couleur dans le dégradé (spécifié par sa position et sa couleur)
Exemple :
• rrreee
Méthode 2 : Utilisez radial-gradient()

Cette méthode crée un dégradé radial qui rayonne vers l'extérieur à partir d'un point central. La syntaxe est la suivante :rrreee

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!