Compréhension approfondie de la propriété Linear-gradient en CSS

Avec le développement d'Internet, les gens ont non seulement des exigences élevées quant aux fonctions des pages Web, mais ont également des exigences de plus en plus élevées concernant l'apparence des pages. Par exemple, la couleur de la page n'utilise plus une seule couleur, mais utilise une variété de mélanges de couleurs pour rendre la page plus belle, attirant ainsi plus d'utilisateurs. Cet article vous expliquera comment utiliser la fonction CSS Linear Gradient Linear-gradient(), y compris les attributs Linear-gradient(), les angles Linear-gradient(), les directions Linear-gradient(), etc. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

La syntaxe de Linear-gradient() :

= Linear-gradient([ [ | to ] ,] ? [, ]+)
🎜 > = [ 🎜 >Les valeurs suivantes sont utilisées pour représenter la direction du dégradé, qui peut être définie à l'aide d'angles ou de mots-clés :
 : utilisez les valeurs d'angle pour spécifier la direction (ou l'angle) du dégradé .

à gauche : définissez le dégradé de droite à gauche. Equivalent à : 270deg

à droite : Définissez le dégradé de gauche à droite. Équivalent à : 90degto top : Définissez le dégradé de bas en haut. Équivalent à : 0degto bottom : Définissez le dégradé de haut en bas. Équivalent à : 180°. Il s'agit de la valeur par défaut, ce qui équivaut à la laisser vide.

: permet de préciser les couleurs de début et de fin du dégradé :
: précise la couleur.
 : utilisez la valeur de longueur pour spécifier les positions de couleur de début et de fin. Les valeurs négatives ne sont pas autorisées
 : utilisez le pourcentage pour spécifier les positions de couleur de début et de fin.

Remarque :

Afin de créer un dégradé linéaire, vous devez définir un point de départ et une direction (spécifiée sous forme d'angle) de l'effet de dégradé. Vous devez également définir la couleur finale. La couleur d'arrêt est la transition douce que vous souhaitez que Gecko effectue, et vous devez en spécifier au moins deux, bien que vous puissiez spécifier plus de couleurs pour créer des effets de dégradé plus complexes.


Compatibilité avec les navigateurs de Linear-gradient()

Exemples d'utilisation de Linear-gradient()

Partie HTML :

Partie CSS :

Rendu :

<div id="box"></div>

tel que Comme indiqué dans la figure, l'exemple est un dégradé linéaire du rouge au jaune, de gauche à droite. Lors de l'écriture, faites attention aux problèmes de compatibilité du navigateur et aux règles grammaticales. Cet article présente principalement le dégradé linéaire en CSS. Le dégradé est divisé en dégradé linéaire et dégradé radial. Le prochain article partagera avec vous le dégradé radial. Les amis qui aiment ça peuvent me suivre !

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

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!