Explication détaillée de la façon dont le dégradé radial CSS3 définit les formes de centre et de taille (exemple de code)

Cet article vous apporte une explication détaillée de la façon dont le dégradé radial CSS3 définit la forme du centre et de la taille (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Pour que les dégradés radiaux --radial-gradient() fonctionnent correctement dans tous les navigateurs pris en charge et pour disposer de nouvelles fonctionnalités pour couvrir tout support futur. On peut écrire ainsi :

.demo {
	/* 不支持浏览器的后备 */ 
	background: #000000;
	
	/* 旧的WebKit语法 */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
	
	/* 新的WebKit语法 */ 
	background-image: -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* IE10 + */ 
	background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* Opera (13?) */
	background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
        
    /* 标准写法*/
    background-image: radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
}

Analysons la syntaxe du dégradé radial étape par étape en utilisant l'écriture standard :

.demo {  
    background-image: radial-gradient(center center, circle cover, black, blue, green, red, purple, white);  
}

Définissons le centre du dégradé

Le premier argument passé à la fonction radial-gradient() (oui, radial-gradient() est une fonction -- c'est pourquoi il a des parenthèses) définit la complétion du dégradé La position du centre de l'ellipse créée. Nous avons utilisé la paire de valeurs "center center" dans l'exemple ci-dessus.

Le mot « radial » signifie « du centre vers l'extérieur le long d'un rayon... ». Ainsi, le premier paramètre définit où commence l’action vers l’extérieur.

Fondamentalement, ce paramètre peut accepter n'importe quelle valeur que vous mettez dans la propriété background-position. La valeur par défaut ou initiale de la position centrale du dégradé est centre centre.

Définir la forme et la taille

Le deuxième paramètre de la fonction définit la forme et la taille du dégradé.

La première partie du deuxième paramètre peut être un cercle ou une ellipse (c'est à dire : cercle ou ellipse). La différence est essentiellement que l'ellipse n'est pas un cercle parfait ; par conséquent, en fonction de la taille et du centre du dégradé, la valeur de l'ellipse peut rendre le dégradé elliptique, mais la valeur du cercle signifie que le dégradé est toujours un cercle parfait.

La deuxième partie du deuxième paramètre (définissant la taille) peut prendre l'une des six valeurs (mots-clés). Ils peuvent être :

1, côté le plus proche (extrémité la plus proche)

2, coin le plus proche (coin le plus proche)

3, côté le plus éloigné (Le extrémité la plus éloignée)

4. coin le plus éloigné (le coin le plus éloigné)

5. contenir (inclure)

6. à première vue, ces valeurs peuvent être un peu difficiles à appréhender, alors décomposons-les une à une avec des exemples pour les comprendre. Utilisons un dégradé de base du noir au blanc afin de pouvoir illustrer le rôle de chaque valeur. Voici le code :

Toutes les autres valeurs resteront les mêmes, mais nous modifierons la valeur de taille (actuellement affichée du côté le plus proche) afin que vous puissiez voir l'effet de chaque valeur sur l'apparence. du dégradé.

.demo {
  background-image: radial-gradient(50px 50px, circle closest-side, black, white);
}

Notez que j'ai défini la position centrale sur 50px 50px pour aider à rendre les valeurs de forme et de taille plus claires.

côté le plus proche

Cette valeur fait que le bord du dégradé croise le côté de l'élément le plus proche du centre du dégradé. Voici à quoi cela ressemble :

coin le plus proche

Cette valeur rend le bord du dégradé le plus proche des coins de les éléments au centre du dégradé se rencontrent. Le voici :

Notez qu'une partie de la forme entière du dégradé est coupée. En effet, il est poussé dans le coin de l'élément de sorte que son bord coupe le coin de l'élément.

côté le plus éloigné

Celle-ci est à l'opposé de la première valeur, ce qui fait que le bord du dégradé est le plus éloigné du centre du dégradé Les côtés des éléments se rencontrent :

Notez que la taille du dégradé dans cet exemple est différente des deux autres valeurs car le dégradé est obligé de s'étirer pour toucher le bord le plus éloigné de l'élément.

coin le plus éloigné (coin le plus éloigné)

Cette valeur provoque l'étirement du dégradé jusqu'au coin de l'élément le plus éloigné du centre du dégradé :

Le dégradé couvre désormais plus d'éléments.

contain

Cette valeur amène l'élément à agrandir le dégradé jusqu'à ce qu'il soit entièrement contenu, sans qu'aucun dégradé ne soit coupé par les bordures de l'élément :

Vous semblez familier ? Eh bien, cela devrait être le cas, puisque cette valeur est équivalente au côté le plus proche, comme mentionné ci-dessus.

cover

Cette valeur entraînera l'amplification du dégradé jusqu'à ce qu'il couvre toute la zone de l'élément :

Cette valeur semble également familière, car elle équivaut au coin le plus éloigné.

Remarque : L'utilisation de mots-clés pour définir la taille ne peut pas définir avec précision la taille d'un cercle progressif.

Résumé : Ce qui précède est tout le contenu présenté dans cet article, j'espère qu'il sera utile à l'étude de chacun.

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!