Maison > Article > interface Web > Comment utiliser le dégradé radial CSS

Comment utiliser le dégradé radial CSS

藏色散人original: 2020-12-22 09:58:452650parcourir

Comment utiliser le dégradé radial CSS : créez d'abord un exemple de fichier HTML ; puis créez un bloc div ; enfin, ajoutez le style CSS comme "background:radial-gradient()" pour obtenir l'effet de dégradé radial.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

Dégradés radiaux : Du point de départ au point final, la couleur effectue un dégradé circulaire de l'intérieur vers l'extérieur.

Syntaxe

background:radial-gradient(center,shape size,start-color,……,last-color);

Forme à dégradé radial

Syntaxe :

background:radial-gradient(shape,start-color,……,last-color);

Explication :

la valeur de la forme peut en prendre deux

cercle——cercle

ellipse——ellipse (par défaut)

mot-clé de taille de dégradé radial

le mot-clé de taille est OK pour terminer La position de la couleur. la valeur par défaut est le coin le plus éloigné.

Syntaxe

background:radial-gradient(size,start-color,……,last-color);

La valeur de la taille est constituée des quatre mots-clés suivants :

closest-side : le côté le plus proche

farthest-side : le côté le plus éloigné

coin le plus proche : coin le plus proche

coin le plus éloigné : coin le plus éloigné

Exemple :

div {
     width: 300px;
     height: 200px;
     /* Safari 5.1 - 6.0 */
     background: -webkit-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* Opera 11.6 - 12.0 */
     background: -o-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* Firefox 3.6 - 15 */
     background: -moz-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* 标准的语法 */
     background: radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
   }

dégradé radial - position centrale du cercle

Syntaxe :

background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

Remarque : La syntaxe standard au centre du cercle est actuellement mal prise en charge par les navigateurs grand public, vous devez donc faire attention à l'ajout du préfixe du navigateur.

Utilisation générale :

-webkit-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
-o-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
-moz-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

Réflexion : 1. Quelle est la signification de la valeur en pourcentage derrière la couleur dans le dégradé ?

3-12 Exercices de programmation

Les amis, j'ai appris le dégradé radial CSS3 Selon les rendus, j'ai ajouté le code pour réaliser :

(1) En prenant le centre (60% 40%) comme point de départ, définissez le centre de. le cercle jusqu'au bord le plus proche, le bord le plus rond, Quatre effets de dégradé radial : coin le plus proche et coin le plus rond.

(2) La forme du dégradé radial est un cercle

(3) Les couleurs de l'intérieur vers l'extérieur sont respectivement rouge, jaune, vert et bleu

L'effet l'image est la suivante

Comment utiliser le dégradé radial CSS

Tâche

Définir le dégradé radial de couleur d'arrière-plan pour les 4 éléments respectivement

(1) Définir le dégradé radial taille au bord le plus proche, bord le plus éloigné, angle le plus proche, angle le plus éloigné

(2) Le centre du dégradé est 60% et 40%

(3) La forme du dégradé est un cercle

(4) Les couleurs dégradées sont le rouge, le jaune, le vert et le bleu de l'intérieur vers l'extérieur.

Code de référence :

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>径向渐变</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            float: left;
            margin: 100px 0 0 100px;
        }
 
        /* 补充代码，分别写出4个元素的背景渐变效果 */
 
        .div1 {
            background: -webkit-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
        }
        .div2 {
            background: -webkit-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
        }
        .div3 {
            background: -webkit-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
        }
        .div4 {
            background: -webkit-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
        }
    </style>
</head>
 
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
 
</html>

Dégradé à répétition progressive radiale

background:repeating-radial-gradient(color1 length|percent,color2 length|percent,……);

3-14 exercices de programmation

Amis, nous avons appris les dégradés à répétition radiale CSS3 dans les dégradés , ensuite, écrivez le code basé sur les rendus pour implémenter des dégradés radiaux répétés de plusieurs boules arc-en-ciel avec le centre de l'élément comme origine.

(1) Les 7 couleurs de l'arc-en-ciel sont requises. La plage de valeurs commence à 0 % et augmente de 5 % à la fois. Par exemple, le rouge vaut 0 %, l'orange vaut 5 %, le jaune vaut 10. %, et ainsi de suite

(2) Astuces : La couleur de la boule arc-en-ciel peut être exprimée en mots anglais

(3) Le rendu est le suivant :

Comment utiliser le dégradé radial CSS

Code de référence :

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>径向渐变</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 补充代码 */
            background: -webkit-repeating-radial-gradient(closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Opera 11.6 - 12.0 */
            background: -o-repeating-radial-gradient( closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Firefox 3.6 - 15 */
            background: -moz-repeating-radial-gradient(closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* 标准的语法 */
            background: repeating-radial-gradient( closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
        }
    </style>
</head>
 
<body>
    <div></div>
 
</body>
 
</html>

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!

html5 css css3 html background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez CSS3 pour simuler les effets de frappe (exemple de code)Article suivant：Utilisez CSS3 pour simuler les effets de frappe (exemple de code)

Articles Liés

Voir plus