Maison >interface Web >tutoriel CSS >Dégradé de couleurs CSS3 : Comment implémenter un dégradé de couleurs d'arrière-plan en CSS3 ?
Dégradé de couleurs CSS3 : Comment implémenter un dégradé de couleurs d'arrière-plan en CSS3 ?
- 不言original
- 2018-09-15 13:42:2013439parcourir
Afin de développer la beauté des pages Web, le dégradé de couleurs d'arrière-plan CSS3 est souvent utilisé. Alors, comment définir le dégradé de couleurs d'arrière-plan CSS3 ? Dans cet article, nous expliquerons comment définir l'arrière-plan dégradé de couleurs CSS.
Ce que nous devons savoir, c'est qu'il existe deux types de dégradés CSS3 : Dégradé linéaire CSS3 et Dégradé radial CSS3 Jetons un coup d'œil aux effets de ces deux dégradés CSS3 pour obtenir l'arrière-plan. dégradés de couleurs.
1. Dégradé de couleur d'arrière-plan défini par le dégradé linéaire CSS3
Tout d'abord, nous devons savoir que l'attribut utilisé par le dégradé linéaire CSS3 est linéaire- pente.
Syntaxe : Linear-gradient(to bottom,colorStrat,colorEnd)
Signification du paramètre :
Le premier paramètre spécifie la direction du dégradé
vers le bas De haut en bas vers ; en bas à droite du haut à gauche vers le bas à droite ; vers le haut à droite du bas à gauche vers le haut à droite ;
de haut en bas vers le haut à gauche ; du bas à droite vers le haut à gauche ; vers la gauche de droite à gauche ; vers le bas à gauche du haut à droite vers le bas à gauche
Le deuxième paramètre précise la couleur de départ du dégradé
Le troisième paramètre précise la couleur du dégradé Couleur de fin
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>l'effet de dégradé de couleur d'arrière-plan CSS3 est le suivant :
2. Dégradé de couleur d'arrière-plan défini par le dégradé radial CSS3
Le dégradé radial est défini par son centre.
Afin de créer un dégradé radial, vous devez également définir au moins deux nœuds de couleur. Les nœuds de couleur sont les couleurs dont vous souhaitez afficher une transition douce. Dans le même temps, vous pouvez également spécifier le centre, la forme (cercle ou ovale) et la taille du dégradé. Par défaut, le centre du dégradé est centre (représentant le point central), la forme du dégradé est une ellipse (représentant une ellipse) et la taille du dégradé est le coin le plus éloigné (représentant le coin le plus éloigné).
L'attribut utilisé par le dégradé radial CSS3 est radial-gradient.
Syntaxe : background : radial-gradient (taille de la forme à la position, couleur de départ, ..., dernière couleur);
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>L'effet de dégradé de couleur d'arrière-plan CSS3 est le suivant :
Cet article se termine ici, à propos du dégradé CSS3 Pour plus d'informations sur le dégradé linéaire CSS3 et le dégradé radial CSS3, veuillez vous référer au manuel CSS3.
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!