Explicación detallada del gradiente lineal CSS y el gradiente radial

Capítulo 9: Color degradado

Resumir

1. gradiente lineal

1.1.¿Qué es un gradiente lineal?

El degradado lineal, como su nombre indica, es un degradado que comienza desde un borde de línea recta y sigue una dirección determinada.
El atributo es fondo, que proporciona el color degradado del fondo.

El valor del atributo es gradiente lineal (), que es una función, el color que debe ser degradado está escrito en ();

Para crear un degradado lineal, debe especificar dos o más colores para realizar una transición suave y formar un color de degradado. Puede lograr degradados desde diferentes direcciones y ángulos, y también se puede utilizar para degradados repetidos.

Si no se especifica ninguna dirección, la mitad del degradado comienza de arriba a abajo de forma predeterminada.

1.2 Cómo escribir gradiente lineal

Método de escritura básico
: cuando no se escribe el porcentaje, los colores del degradado se distribuirán uniformemente de forma predeterminada.

Por ejemplo: background: linear-gradient(red, green, blue);
de arriba a abajo de forma predeterminada, comenzando desde rojo, degradado a verde y luego terminando en azul, los tres colores se distribuyen uniformemente.

Controla la relación de degradado de diferentes colores a través de porcentajes.

Por ejemplo: background: linear-gradient(red 0%, green 100%);
comience desde 0% y use un degradado rojo de
0~100%: transición de rojo a verde
y finalmente 100% a verde al final

Especial: degradado capa por capa

background: linear-gradient(red 50%, blue 50%);
Quiere decir que la mitad es roja y la otra mitad es azul,
de hecho equivale a background: linear-gradient(red 0%,red 50%, blue 50%,blue 100%);
partir del 0%, pasar al 50% para ser rojo, empezar del 50% al 100% ser azul.

Utilice para controlar la dirección del degradado.

Por ejemplo: background: linear-gradient(to top, red, green);
to top significa de abajo hacia arriba, comenzando en rojo y terminando en verde.

Utilice grados para representar el ángulo para controlar la dirección del degradado
porque la dirección predeterminada es de arriba a abajo. Por ejemplo, 45 grados puede entenderse como el inicio del degradado girando el borde superior 45 grados en el sentido de las agujas del reloj.

Por ejemplo: background: linear-gradient(45deg, pink 40%, purple 60%);
comience con el borde superior girando 45 grados en el sentido de las agujas del reloj, comenzando con rosa y finalmente terminando con rosa.

La función repetición-lineal-gradiente() se utiliza para crear un fondo degradado lineal repetido

Por ejemplo: background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
gire 45 grados, comience con verde claro, parte de 20 px de verde claro, parte de 20 px de azul, repita

Por ejemplo: background: repeating-linear-gradient(red, yellow 10%, green 20%);
comienza en rojo, cambia gradualmente a amarillo cuando alcanza el 10%, luego cambia gradualmente a verde cuando alcanza el 20%, y así sucesivamente.

Use valores rgba para representar colores degradados con transparencia
. Para agregar transparencia, usamos la función rgba() para definir un nodo de color. El último parámetro en la función rgba() puede ser un valor de 0 a 1, que define la transparencia del color: 0 significa completamente transparente, 1 significa completamente opaco

como: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>

Representación:
Insertar descripción de la imagen aquí

2. Degradado radial

Un gradiente radial es un gradiente que se extiende gradualmente hacia afuera desde el centro de un círculo, al igual que los anillos de crecimiento de un árbol, extendiéndose hacia afuera en círculos.

2.1 ¿Qué es un gradiente radial?

El valor del atributo es: función radial-gradient(), en () escribe el color que debe ser degradado;

Crear un degradado radial también es un degradado formado por dos o más colores. Puedes controlar la posición y la forma del centro del círculo para lograr un degradado radial.

De forma predeterminada, el centro del degradado radial está en el centro del cuadro y el centro del círculo es elíptico de forma predeterminada.

2.2 Cómo escribir gradiente radial

Método de escritura básico
: cuando no se escribe el porcentaje, los colores del degradado se distribuirán uniformemente de forma predeterminada.

Por ejemplo: background: radial-gradient(red, green, blue);
comenzando desde el centro del cuadro, de rojo a verde y luego a azul, a los tres colores se les asignan degradados de forma predeterminada.

Controla la relación de degradado de diferentes colores a través de porcentajes.

Por ejemplo: background: radial-gradient(red 30%, green 70%);
comenzando desde el centro, del 0 % al 30 % es rojo, del 30 % al 70 % es el gradiente de rojo al verde y del 70 % al 100 % es verde.

Especial: hay un círculo rojo en el medio y la parte restante es verde,
por ejemplo: background: radial-gradient(red 50%, green 50%);
de hecho, equivale abackground: radial-gradient(red 0%,red 50%,green 50% ,green 100%);

La dirección del centro del círculo se controla con at.
La posición predeterminada del centro del círculo es en el centro del cuadro. La dirección del centro del círculo se puede controlar con at.

Por ejemplo: background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
at es el valor después de controlar la dirección del centro del círculo. El primer valor representa la dirección horizontal (izquierda y derecha). El segundo valor: la dirección vertical (arriba y abajo), que es equivalente a la coordenada. Posición de un sistema de coordenadas rectangular plano que indica la posición del centro del círculo.

Controlar la forma del centro del círculo
La forma del centro del círculo es elíptica por defecto. Puede especificar la forma del centro del círculo dando un valor específico.

Forma del centro del círculo: el valor predeterminado es elipse Círculo: círculo

Puedes escribir círculo directamente para indicar que la forma del centro del círculo es un círculo y escribir elipse o dejarlo en blanco para indicar que la forma del centro del círculo es una elipse.
como:background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);

La forma del centro del círculo se puede expresar mediante valores de píxeles específicos,
por ejemplo:background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
los dos primeros valores de píxeles indican que el ancho y el alto del centro del círculo son ambos de 200 px, lo que indica que es el centro de un círculo. Los dos valores de píxeles después de representan la posición del centro del círculo, como se mencionó anteriormente.

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

Representación:
Insertar descripción de la imagen aquí

Resumir

Lo anterior es el gradiente lineal y el gradiente radial compilados por el editor. Ambos son del mismo género y de género opuesto. He dado una explicación más detallada del significado y el método de expresión de los dos gradientes y casos relacionados. Los degradados lineales y radiales en realidad no se utilizan en muchos lugares, simplemente entiéndalos y no es necesario entrar en detalles. Fue compilado con referencia a varias fuentes y a mi propio entendimiento. Si puede haber inexactitudes u omisiones, espero que puedan iluminarme y hacer correcciones. Me gustaría agradecerles de antemano.