Explication détaillée de la syntaxe du gradient linéaire CSS3 (exemple de code)

Cet article vous apporte une explication détaillée de la syntaxe du dégradé linéaire CSS3 (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.

Syntaxe complète pour le dégradé linéaire :

.demo  {   
    background: linear-gradient(to left, black, white);
}

Effet :

Écriture de compatibilité :

Pour rendre le dégradé linéaire applicable à tous les navigateurs pris en charge, vous pouvez faire ceci :

.demo {	
	/* IE6 & IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
	
	/* IE8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
	
	/* Safari 4 +，Chrome 2+  */
	background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff));
	
	/* Safari 5.1 - 6.0 */
	background: -webkit-linear-gradient(right, black, white);
	
	/* Firefox 3.6 - 15 */
	background: -moz-linear-gradient(right, black, white);
	
	/* Opera 11.1 - 12.0 */
	background: -o-linear-gradient(right, black, white);
	
	/* 标准的语法 */
	background: linear-gradient(to left, black, white);
	
}

L'effet est le suivant montré ci-dessus Idem.

Angle de dégradé ou point de départ

Un dégradé linéaire est un dégradé créé en spécifiant une ligne de dégradé droite, puis en plaçant plusieurs couleurs le long de cette ligne . Nous pouvons fournir une direction pour le dégradé via les paramètres.

Nous pouvons définir la direction de la ligne de dégradé de deux manières :

1. Déclarez l'angle utilisé pour le dégradé,

2. Utilisez des mots-clés pour indiquer au navigateur où. est-ce que le dégradé commence.

Dans l'exemple ci-dessus, nous lui avons dit de partir de la droite et d'aller vers la gauche , ce qui équivaut à l'angle "-90deg". Cela produirait donc le même résultat :

background: linear-gradient(-90deg, black, white);

Rendu :

Le même résultat serait également affiché si vous utilisiez l'angle "270deg", tout à fait à "-90deg".

Nous pouvons donc utiliser l'un des mots-clés de position (haut, droite, gauche, bas) ou simplement lui donner un angle spécifique numériquement et il saura par où commencer.

Couleur et position de fin

Position de fin

Avec un simple dégradé linéaire, il vous suffit Deux couleurs de terminaison sont requises sans spécifier de position (comme dans l'exemple ci-dessus). Mais dans l'exemple suivant :

background: linear-gradient(-90deg, black 50%, white 100%);

nous remarquerons que cela a inclus la position de chaque couleur dans la valeur en pourcentage.

Rendu :

Cela indique au navigateur où le dégradé de chaque couleur doit commencer et se terminer (en spécifiant la longueur de la couleur). Le navigateur déterminera naturellement le dégradé réel ; il vous suffit de lui indiquer où le "changement progressif" doit "s'arrêter" complètement. Dans l'exemple ci-dessus, le "dégradé" s'arrêterait sur le côté gauche de l'élément, vous ne verrez donc pas beaucoup (le cas échéant) de blanc complet dans cet élément.

Couleur de fin

L'ajout de blocs de couleur n'est plus compliqué, il suffit d'ajouter n'importe quel nombre de valeurs séparées par des virgules. Voici le CSS pour l'arc-en-ciel :

.demo  {
   background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%)  ;
}

Rendu :

Quelques notes sur les dégradés linéaires :

1. Le dégradé CSS3 n'est pas un attribut, et l'autre est une image rendue par le navigateur

2 Vous pouvez utiliser des dégradés à n'importe quel endroit via l'url (image.jpg) ; en CSS ;

3. La syntaxe de création d'un dégradé est en fait une fonction qui prend diverses valeurs comme paramètres

4. Vous pouvez également spécifier des dégradés linéaires répétés, qui peuvent être utilisés ; dans certains cas. Est très utile ;

5. La valeur de la position finale de la couleur peut être exprimée en pourcentage ou en pixels

6. comme -20 %) et les pourcentages supérieurs à 100 % sont parfaitement valables.

Résumé : Ce qui précède est l'intégralité du contenu de 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!