Maison > Article > interface Web > 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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 200px;
background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 150px;
width: 200px;
background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>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!