Dégradé de couleurs CSS3 : Comment implémenter un dégradé de couleurs d'arrière-plan en CSS3 ?-tutoriel CSS-php.cn

Dégradé de couleurs CSS3 : Comment implémenter un dégradé de couleurs d'arrière-plan en CSS3 ?

不言

Libérer： 2018-09-15 13:42:20

original

13366 Les gens l'ont consulté

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>

Copier après la connexion

l'effet de dégradé de couleur d'arrière-plan CSS3 est le suivant :

Dégradé de couleurs CSS3 : Comment implémenter un dégradé de couleurs darrière-plan en CSS3 ?

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Dégradé de couleurs CSS3 : Comment implémenter un dégradé de couleurs d'arrière-plan en CSS3 ?