Diagrama de ángulo y porcentaje de gradiente lineal

Tabla de contenido

1. Ángulo

ángulo de gradiente lineal La dirección vertical hacia arriba es 0 grados, y el ángulo formado por la selección en el sentido de las agujas del reloj y la dirección vertical hacia arriba es el ángulo.

Tenga en cuenta que la sintaxis estándar no admite direcciones de inicio, por ejemplo:

 background: linear-gradient(top, red, blue);

Si desea usar el ángulo de inicio, use el prefijo para muebles:

background: -ms-linear-gradient(top, red, blue);
background: -webkit-linear-gradient(top, red, blue);
background: -o-linear-gradient(top, red, blue);
background: --moz-linear-gradient(top, red, blue);

Entonces, la dirección del gradiente es de arriba a abajo, lo que equivale a:

 background: linear-gradient(bottom, red, blue);

2. Porcentaje

porcentaje de gradiente lineal

Tres, código de prueba

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin: 0 auto;
            width: 100vw;
        }

        .item {
            width: 300px;
            height: 300px;
            line-height: 300px;
            margin: 10px auto;
            font-size: 20px;
            color: white;
            text-align: center;
        }

        .lg1 {
            background: linear-gradient(red, blue);
        }

        .lg2 {
            background: linear-gradient(to top, red, blue);
        }

        .lg3 {
            background: linear-gradient(45deg, red, blue);
        }

        .lg4 {
            background: linear-gradient(90deg, red, blue);
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="item lg1">linear-gradient(red, blue);</div>
        <div class="item lg2">linear-gradient(to top, red, blue);</div>
        <div class="item lg3">linear-gradient(45deg, red, blue);</div>
        <div class="item lg4">linear-gradient(90deg, red, blue);</div>
    </div>
</body>
</html>

---------------------
Autor: trayvontang
Fuente: CSDN
Original: https: //blog.csdn.net/trayvontang/article/details/106980984
Descargo de responsabilidad: este artículo Para el artículo original del autor, adjunte el enlace de la publicación del blog para volver a imprimirlo.