Explication détaillée du dégradé linéaire et du dégradé radial en CSS3

Cet article présente principalement des informations pertinentes sur les dégradés en CSS, partage principalement les connaissances sur les dégradés linéaires et radiaux en CSS3 et vous apporte un autre angle d'utilisation des dégradés. L'article le présente en détail à travers un exemple de code. référez-vous-y, j'espère que cela pourra aider tout le monde.

1. Dégradé linéaire

Ici, vous devez d'abord examiner la syntaxe de base, puis examiner les exemples suivants.

    linear-gradient(90deg,red 20%,blue 50%,yellow 80%);

Evidemment à travers cette image, vous comprendrez à peu près le rôle du réglage de ces paramètres. Même si je n’ai utilisé aucun mot pour l’expliquer. (Donc, quand vous ne comprenez pas la définition, vous devez la pratiquer.)
Ensuite, nous devons faire quelque chose. Nous chevauchons les points de séparation des couleurs.

    width: 300px;
    height: 200px;
    background: linear-gradient(90deg,blue 100px,#fff 100px,#fff 200px,red 200px);

Oui, c'est l'effet produit par le code de dégradé ci-dessus. N'avez-vous pas l'impression que cela brise votre impression précédente de dégradés.

Ensuite, nous utilisons un dégradé linéaire pour obtenir des effets plus cool, tels que :

Sentez-vous que vous avez dépassé votre votre propre compréhension des dégradés ? Permettez-moi de parler de l'idée de mettre en œuvre cet arrière-plan : il s'agit d'un modèle régulier. Nous devons trouver son modèle de base. Je pense que vous l'avez trouvé.

Points de connaissances que nous devons utiliser :

• supports d'arrière-plan déclarant plusieurs dégradés linéaires séparés par des virgules

• Lorsque vous déclarez plusieurs dégradés linéaires, celui déclaré en premier est plus proche de l'utilisateur. (Ici, nous devons considérer la question du revêtement, généralement transparent

• Je ne maîtrise pas encore l'abréviation de background, mais cela ne fonctionnera pas

Combinaison raisonnable de répétition d'arrière-plan, de taille d'arrière-plan et de position d'arrière-plan.

    width: 410px;
    height: 410px;
    background: linear-gradient(rgb(2,222,222) 10px, transparent 10px) repeat left top / 40px,
                linear-gradient(90deg,rgb(2,222,222) 10px, transparent 10px) repeat left top / 40px;

Et grâce au dégradé, nous pouvons animer la couleur d'arrière-plan sans consommer d'éléments HTML supplémentaires pour obtenir l'effet souhaité. Exemple :

    /*
     *  这里用scss写的，对新手不太友好，抱歉(-_-)
     */
    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

Fondamentalement, un dégradé radial est similaire à un dégradé linéaire, sauf qu'il part du centre Les points s'étendent vers l'extérieur. Je n’entrerai donc pas dans les détails ici.

Sans plus attendre, dessinons des cercles concentriques :

    border-radius: 50%;
    background: radial-gradient(circle,rgb(22,222,111) 0,rgb(22,222,111) 50px,red 50px,red 100px, rgb(222,222,1) 100px, rgb(222,222,1) 150px,rgb(222,2,111) 150px);

Le code de base est le suivant :

    width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                linear-gradient(90deg,transparent 10px, rgb(247,245,201) 10px);
            background-size: 20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,60px 60px,60px 60px,100% 100%;
            background-position: -10px 0,-10px 20px,-10px 40px,-10px 60px,-10px 80px,-10px 100px,60px -30px,60px 90px,left center;

Recommandations associées :

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!