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

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.

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);

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);
        }

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)

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)

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);
        }

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!