Explication détaillée du dégradé linéaire CSS et du dégradé radial

Chapitre 9 : Dégradé de couleur

Résumer

1. Dégradé linéaire

1.1.Qu'est-ce qu'un dégradé linéaire ?

Le dégradé linéaire, comme son nom l'indique, est un dégradé partant d'un bord de ligne droite et le long d'une certaine direction.
L'attribut est background, qui donne la couleur dégradée de l'arrière-plan.

La valeur de l'attribut est Linear-gradient(), qui est une fonction. La couleur qui doit être dégradée est écrite en ();

Pour créer un dégradé linéaire, vous devez spécifier deux couleurs ou plus pour effectuer une transition en douceur afin de former un dégradé de couleur. Il peut obtenir des dégradés dans différentes directions et angles, et peut également être utilisé pour des dégradés répétés.

Si aucune direction n'est spécifiée, la moitié du dégradé commence par défaut de haut en bas.

1.2 Comment écrire un dégradé linéaire

Méthode d'écriture de base
: Lorsque le pourcentage n'est pas écrit, les couleurs du dégradé seront réparties uniformément par défaut.

Par exemple : background: linear-gradient(red, green, blue);
de haut en bas par défaut, en commençant par le rouge, en passant par le dégradé jusqu'au vert, puis en terminant par le bleu, les trois couleurs sont uniformément réparties.

Contrôlez le rapport de dégradé de différentes couleurs via des pourcentages

Par exemple : background: linear-gradient(red 0%, green 100%);
commencez à 0 % et utilisez le dégradé rouge
0~100 % : transition du rouge au vert
et enfin 100 % au vert à la fin

Spécial : Dégradé couche par couche

background: linear-gradient(red 50%, blue 50%);
Cela signifie que la moitié est rouge et l'autre moitié bleue.
En fait, cela équivaut à background: linear-gradient(red 0%,red 50%, blue 50%,blue 100%);
partir de 0%, passer à 50% pour être rouge, partir de 50% à 100% pour être bleu.

Utilisez pour contrôler la direction du dégradé

Par exemple : background: linear-gradient(to top, red, green);
vers le haut signifie de bas en haut, en commençant par le rouge et en terminant par le vert.

Utilisez deg pour représenter l'angle permettant de contrôler la direction du dégradé,
car la direction par défaut est de haut en bas. Par exemple, 45 degrés peut être compris comme le début du dégradé en faisant pivoter le bord supérieur de 45 degrés dans le sens des aiguilles d'une montre.

Par exemple : background: linear-gradient(45deg, pink 40%, purple 60%);
commencez par une rotation du bord supérieur de 45 degrés dans le sens des aiguilles d'une montre, en commençant par le rose et en terminant par le rose.

La fonction repeating-linear-gradient() est utilisée pour créer un arrière-plan dégradé linéaire répétitif

Par exemple : background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
faites pivoter de 45 degrés, commencez par du vert clair, une partie de 20 px de vert clair, une partie de 20 px de bleu, répétez.

Par exemple : background: repeating-linear-gradient(red, yellow 10%, green 20%);
il part du rouge, passe progressivement au jaune lorsqu'il atteint 10 %, puis passe progressivement au vert lorsqu'il atteint 20 %, et ainsi de suite.

Utilisez les valeurs rgba pour représenter les couleurs dégradées avec transparence
. Pour ajouter de la transparence, nous utilisons la fonction rgba() pour définir un nœud de couleur. Le dernier paramètre de la fonction rgba() peut être une valeur de 0 à 1, qui définit la transparence de la couleur : 0 signifie complètement transparent, 1 signifie complètement opaque

comme:background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>线性渐变</title>
  <style>
    .one>div,
    .two>div,
    .three>div {
      
      
      display: inline-block;
      width: 200px;
      height: 250px;
    }
    /* 线性渐变写法： */

    /* 1.基础写法  
    最少要写两种及以上的颜色 ,默认是从上到下开始渐变，平均分配渐变颜色*/
    .one>.div1 {
      
      
      /* 默认从上到下，默认从红色开始，渐变到绿色，再以蓝色结束，三者颜色，平均分配 */
      background: linear-gradient(red, green, blue);
    }
    .one>.div2 {
      
      
      background: linear-gradient(red, pink, green, blue, yellow,
          purple);
    }

    /* 2.通过百分比控制不同颜色的渐变比例 */
    .one>.div3 {
      
      
      background: linear-gradient(red 0%, green 100%);
      /* 
              一开始从0%开始用红色渐变  
              0~100%: 过渡从红色 变成绿色
              最后100%刷绿色  结尾
            */
    }
    .one>.div4 {
      
      
      /* 一半是红色  一半蓝色 */
      background: linear-gradient(red 50%, blue 50%);
    }
    .one>.div5 {
      
      
      /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
      background: linear-gradient(blue, green 40%, red);
    }
    .one>.div6 {
      
      
      background: linear-gradient(red 0%, red 33%, yellow 33%, yellow 66%, blue 66%, blue 100%);
      /* 用刷油漆来打比喻：
               0~20: 红色油漆
               0% 开始刷红色油漆
               20: 红色油漆停止刷
               
               20~50: 黄色油漆 
               20:开始刷黄色
               50: 停止刷黄色 
               以此类推后面 蓝色 
            */
    }


    /* 3.通过to来控制渐变方向 */
    .two>.div1 {
      
      
      /* 原本渐变色 默认都是从上到下的方向开始渐变*/
      background: linear-gradient(red, yellow, green);
    }
    .two>.div2 {
      
      
      /* to top 表示从下向上，由红色开始渐变，绿色结束 */
      background: linear-gradient(to top, red, green);
    }
    .two>.div3 {
      
      
      /* 表示从左上到右下，由红色开始渐变，绿色结束 */
      background: linear-gradient(to right bottom, red, green);
    }

    /* 4.通过deg表示角度来控制渐变方向
    因为默认方向为上到下，如45度可以理解为以最上面的边按照顺时针方向旋转45度开始渐变 */
    .two>.div4 {
      
      
      /* 以最上面的边按照顺时针方向旋转45度开始，粉色开始，最后以粉色结束渐变*/
      background: linear-gradient(45deg, pink 40%, purple 60%);
    }
    .two>.div5 {
      
      
      /* 旋转90度)*/
      background: linear-gradient(90deg, pink 40%, purple 60%);
    }

    /* 5.repeating-linear-gradient() 函数用于创建重复的线性渐变背景。 */
    .three>.div1 {
      
      
      /* 旋转45度，以浅绿色开始，20px部分的浅绿色，20px部分的蓝色，如此重复 */
      background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
    }
    .three>.div2{
      
      
      /* 由红色开始渐变，到10%时，渐变成黄色，再到20％时渐变到绿色，如此重复 */
      background: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

    /* 6. 通过rgba值，用透明度来表示渐变色 */ 
    .three>.div3 {
      
      
      /* 为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。 */
      background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
  </div>
  <div class="two">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
  </div>
  <div class="three">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>

Le rendu:
Insérer la description de l'image ici

2. Dégradé radial

Un dégradé radial est un dégradé qui s'étend progressivement vers l'extérieur à partir du centre d'un cercle, tout comme les cernes annuels d'un arbre, s'étendant vers l'extérieur en cercles.

2.1 Qu'est-ce qu'un dégradé radial ?

La valeur de l'attribut est : fonction radial-gradient(), dans () écrivez la couleur qui doit être dégradée ;

La création d'un dégradé radial est également un dégradé formé de deux couleurs ou plus. Vous pouvez contrôler la position et la forme du centre du cercle pour obtenir un dégradé radial.

Par défaut, le centre du dégradé radial est au centre de la boîte et le centre du cercle est elliptique par défaut.

2.2 Comment écrire un dégradé radial

Méthode d'écriture de base
: Lorsque le pourcentage n'est pas écrit, les couleurs du dégradé seront réparties uniformément par défaut.

Par exemple : background: radial-gradient(red, green, blue);
en partant du centre de la boîte, du rouge au vert puis au bleu, les trois couleurs se voient attribuer des dégradés par défaut.

Contrôlez le rapport de dégradé de différentes couleurs via des pourcentages

Par exemple : background: radial-gradient(red 30%, green 70%);
en partant du centre, 0 % à 30 % est du rouge, 30 % à 70 % est le dégradé du rouge au vert et 70 % à 100 % est du vert.

Spécial : Il y a un cercle rouge au milieu et la partie restante est verte.
Par exemple : background: radial-gradient(red 50%, green 50%);
En fait, cela équivaut àbackground: radial-gradient(red 0%,red 50%,green 50% ,green 100%);

La direction du centre du cercle est contrôlée par at.
La position par défaut du centre du cercle est au centre de la boîte. La direction du centre du cercle peut être contrôlée par at.

Par exemple : background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
at est la valeur après avoir contrôlé la direction du centre du cercle. La première valeur représente la direction horizontale (gauche et droite). La deuxième valeur : la direction verticale (haut et bas), qui est équivalente à la coordonnée position d'un système de coordonnées plan rectangulaire indiquant la position du centre du cercle.

Contrôler la forme du centre du cercle
La forme du centre du cercle est elliptique par défaut. Vous pouvez spécifier la forme du centre du cercle en donnant une valeur spécifique.

Forme du centre du cercle : la valeur par défaut est une ellipse. Cercle : cercle

Vous pouvez écrire cercle directement pour indiquer que la forme du centre du cercle est un cercle, et écrire ellipse ou laisser vide pour indiquer que la forme du centre du cercle est une ellipse.
comme:background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);

La forme du centre du cercle peut être exprimée à travers des valeurs de pixels spécifiques.
Par exemple :background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
les deux premières valeurs de pixels indiquent que la largeur et la hauteur du centre du cercle sont toutes deux de 200 px, ce qui indique qu'il s'agit du centre d'un cercle. Les deux valeurs de pixels après représentent la position du centre du cercle, comme mentionné ci-dessus.

<style>
        div {
      
      
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        /* radial-gradient():径向渐变
        默认在盒子正中心开始渐变，颜色自己平均分配由内向外渐变 */
        .div1 {
      
      
            /* 默认由盒子中心开始，红色到绿色再到蓝色，三种颜色默认分配渐变 */
            background: radial-gradient(red, green, blue);
        }

        .div2 {
      
      
            /* 中间是一个红色的圆，然后剩余部分是绿色 */
            background: radial-gradient(red 50%, green 50%);
            /* 其实就是相当于是 background: radial-gradient(red 0%,red 50%,green 50% ,green 100%); */
        }

        .div3 {
      
      
            /* 由中心开始，0%到30%是红色，30%到70%是红色渐变到绿色的渐变，70%到100%是绿色 */
            background: radial-gradient(red 30%, green 70%);
        }

        .div4 {
      
      
            /*   at是控制圆心方向 后面那个值 第一个表示 水平(左右)  第二值:  垂直(上下)方向*/
            background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);

        }

        .div5 {
      
      
            /* 圆心形状:默认是椭圆 ellipse   圆:circle    */
            background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
            /* 200px  圆心宽度    200高度   这两个值是用来控制圆心的形状的，如果这两个值没写默认是椭圆的圆心*/
        }

        .div6 {
      
      
            /* 圆心形状:默认是椭圆 为了更好的观察，把这个盒子设置宽高不一样 因为如果是正方形就看不出来  */
            width: 200px;
            height: 300px;
            /* 此处at前面没有写值，没写默认是椭圆形状的圆心*/
            background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
        }

        .div7 {
      
      
            width: 200px;
            height: 300px;
            /* 此处at前面，指定圆心的形状*/
            background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);
            /* 可以通过circle表示圆， ellipse表示椭圆，或者用具体的两个数值来表示圆心的形状
             如： background: radial-gradient(200px 200px at 100px 100px,red 0%,red 20%,green 20%,green 40%);  
             200px： 圆心宽度    200px：圆心高度   这两个值是用来控制圆心的形状的，如果这两个值没写默认是椭圆的圆心*/
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
</body>

Le rendu:
Insérer la description de l'image ici

Résumer

Ce qui précède est le dégradé linéaire et le dégradé radial compilés par l'éditeur. Ils sont tous deux du même sexe et du sexe opposé. J'ai donné une explication plus détaillée de la signification et de la méthode d'expression des deux dégradés et des cas associés. Les dégradés linéaires et radiaux ne sont pas réellement utilisés dans de nombreux endroits, il suffit de les comprendre et il n'est pas nécessaire d'entrer dans les détails. Il a été compilé en référence à diverses sources et à ma propre compréhension. S'il peut y avoir des inexactitudes et des omissions, j'espère que vous pourrez m'éclairer et apporter des corrections. Je vous remercie d'avance.