Maison > interface Web > tutoriel HTML > Comment définir le dégradé radial d'arrière-plan en HTML

Comment définir le dégradé radial d'arrière-plan en HTML

醉折花枝作酒筹
Libérer: 2023-01-06 11:16:38
original
6249 Les gens l'ont consulté

En HTML, vous pouvez utiliser la fonction radial-gradient pour définir un dégradé radial. Il vous suffit d'ajouter "background:radial-gradient (position de départ, forme, taille, couleur, couleur)" à. l'attribut background de l'élément "C'est tout.

Comment définir le dégradé radial d'arrière-plan en HTML

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Dégradé radial : la transition d'un point vers les couleurs environnantes.

Dégradé radial comme indiqué sur la figure :

Syntaxe : (il faut ajouter le préfixe du navigateur)

background: radial-gradient(center, shape, size, start-color, ..., last-color);
Copier après la connexion

center : le point de départ de la Position du dégradé, qui peut être un pourcentage. La valeur par défaut est le centre du graphique.

forme : la forme du dégradé, l'ellipse représente une ellipse et le cercle représente un cercle. La valeur par défaut est ellipse. Si la forme de l'élément est un élément carré, l'ellipse et le cercle seront affichés de la même manière.

taille : à propos de la taille du dégradé radial :

côté le plus proche, côté le plus proche

côté le plus éloigné, côté le plus éloigné

coin le plus proche, coin le plus proche

coin le plus éloigné

Le code d'implémentation est le suivant :

p{
            width:500px;
            height:300px;
            margin:40px auto;
            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);
        }
Copier après la connexion

Informations étendues :

Dégradé linéaire : d'une direction à Changement de couleur d'une direction à l'autre

Syntaxe du mode standard (sans ajouter de préfixe de navigateur) :

background:linear-gradient(direction,color-stop1,color-stop2)
Copier après la connexion

Explication : La valeur par défaut de la direction est vers le bas, c'est-à-dire de haut en bas

stop : la position de distribution de la couleur, la valeur par défaut est une distribution uniforme (distribution uniforme)

Syntaxe du mode de compatibilité (ajouter un préfixe du navigateur) :

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)
Copier après la connexion

Remarque : la valeur de direction ne peut pas être ajoutée, cette valeur indique que la couleur commence à se dégrader à partir de cette direction, qui est opposée à l'

stop ci-dessus : la position de distribution de la couleur, la valeur par défaut est une distribution uniforme (distribution moyenne)

Direction du dégradé : l'implémentation précédente du dégradé haut et bas ou gauche et droite, nous présenterons ensuite le dégradé diagonal

1 de gauche à droite vers le haut (dégradé haut et bas ou gauche et droite) <. 🎜>

2. De haut en gauche vers le bas droit (dégradé diagonal)

3. Modifications de l'angle de la ligne de dégradé

Par exemple : Mode standard : 40 deg 40 degrés

Mode compatible : 90 - 40 degrés

Dégradé linéaire : répartition des couleurs (taille de la zone de couleur) :

dégradé linéaire (direction, couleur 1 20 %, couleur 2 30 %, couleur 3)

à 20%, cette position est toujours la couleur 1 sur 20 % Commencer le dégradé vers la couleur 2

Le code est le suivant :

div{
            width:500px;
            height:300px;
            margin:100px auto;
            background-image: -webkit-linear-gradient(left, red, yellow);
        }
Copier après la connexion
Apprentissage recommandé :

html tutoriel vidéo

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal