简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment définir le dégradé en CSS

Comment définir le dégradé en CSS

青灯夜游
青灯夜游original
2021-04-20 17:52:5210386parcourir

Méthode : 1. Utilisez Linear-gradient() pour implémenter un dégradé linéaire, la syntaxe est "linear-gradient (angle, liste de couleurs de début et de fin)" ; 2. Utilisez radial-gradient() pour implémenter radial ; dégradé, la syntaxe est "radial -gradient (position de taille, couleurs de début et de fin)".

Comment définir le dégradé en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Fonction Linear-gradient() - Dégradé linéaire

La fonction Linear-gradient() est utilisée pour créer une "image" d'un linéaire dégradé.

Pour créer un dégradé linéaire, vous devez spécifier deux couleurs. Vous pouvez également obtenir des effets de dégradé dans différentes directions (spécifiées sous forme d'angle). Si la direction n'est pas spécifiée, le dégradé sera de haut en bas. par défaut.

Syntaxe : 

linear-gradient(direction, color-stop1, color-stop2, ...);

Paramètres :

值 描述
direction 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。

Exemple de code (en tenant compte de la compatibilité du navigateur) : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
    .demo{
        width:500 ;
        height: 300;
        margin: 50px auto;
    }
    .demo *{
        width: 200px;
        height: 200px;
        margin: 20px;
        text-align: center;
        line-height: 200px;
        color: #fff;
        font-size: 16px;
        float: left;
    }
    .demo1{
        /* 底色 */
        background-color: #fd0d0d;
       
        /* chrome 2+, safari 4+; multiple color stops */
        background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), 
        color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
       
        /* chrome 10+, safari 5.1+ */
        background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        
        /* firefox; multiple color stops */
        background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
       
        /* ie 6+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;,endColorstr=&#39;#d89e3c&#39;);
        
        /* ie8 + */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, 
        endColorstr=&#39;#d89e3c&#39;)";
        
        /* ie10 */
        background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        /* opera 11.1 */
        background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        
        /* 标准写法 */
            background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        }

        .demo2{
            /* 底色 */
        background-color:#d41a1a;
        
        /* chrome 2+, safari 4+; multiple color stops */
        background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), 
        color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
        
        /* chrome 10+, safari 5.1+ */
        background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
        
        /* firefox; multiple color stops */
        background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
        
        /* ie10 */
        background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
        
        /* opera 11.1 */
        background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
        
        /* 标准写法 */
            background-image: linear-gradient(45deg, #d41a1a, #d9e60c);
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="demo1">基本线性渐变--自上而下</div>
        <div class="demo2">基本线性渐变--45度角</div>
    </div>
</body>
</html>

Rendu :

Comment définir le dégradé en CSS

fonction radial-gradient() - dégradé radial

La fonction radial-gradient() crée une "image" avec un dégradé radial.

Le dégradé radial est défini par le point central. Exemple :

Comment définir le dégradé en CSS

Afin de créer un dégradé radial, vous devez définir deux couleurs d'arrêt.

Les dégradés de couleurs radiaux CSS (dégradés radiaux) sont différents des dégradés linéaires (dégradés linéaires). Ils ne font pas de dégradé dans une direction, mais prennent un point comme centre et rayonnent des dégradés autour de 360 ​​degrés.

Syntaxe :

radial-gradient(shape size at position, start-color, ..., last-color);

Valeurs des paramètres :

Valeur
Description
forme Déterminez le type de cercle :
    ellipse (par défaut) : Spécifie un dégradé radial elliptique.
  • cercle : Spécifiez le dégradé radial du cercle
taille Définir la taille du dégradé, valeurs possibles :
  • coin le plus éloigné (par défaut) : Spécifiez la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au coin le plus éloigné de le centre du cercle
  • côté le plus proche : spécifiez la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au côté le plus proche du centre.
  • coin le plus proche : spécifiez la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au coin le plus proche du centre.
  • côté le plus éloigné : spécifiez la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au côté le plus éloigné. du centre du cercle
position Définir la position du dégradé. Valeurs possibles :
  • 值 描述
    shape 确定圆的类型:
    • ellipse (默认): 指定椭圆形的径向渐变。
    • circle ：指定圆形的径向渐变
    size 定义渐变的大小，可能值：
    • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
    • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
    • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
    • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
    position 定义渐变的位置。可能值：
    • center（默认）：设置中间为径向渐变圆心的纵坐标值。
    • top：设置顶部为径向渐变圆心的纵坐标值。
    • bottom：设置底部为径向渐变圆心的纵坐标值。
    start-color, ..., last-color 用于指定渐变的起止颜色。
    center

    (par défaut) : définissez la valeur ordonnée du centre du cercle de dégradé radial au milieu.

  • top : définissez le haut comme étant la valeur ordonnée du centre du cercle de dégradé radial.
  • bas

     : définissez le bas sur la valeur ordonnée du centre du cercle de dégradé radial.

start-color, ..., last-color Utilisé pour spécifier les couleurs de début et de fin du pente.

Exemple :

Comment définir le dégradé en CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

Rendu :

Comment définir le dégradé en CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
    .demo{
        width:500 ;
        height: 300;
        margin: 50px auto;
    }
    .demo *{
        width: 200px;
        height: 200px;
        margin: 20px;
        text-align: center;
        line-height: 200px;
        color: #fff;
        font-size: 16px;
        float: left;
    }
    .demo1{
        background-image: -moz-radial-gradient(#ecff05, red);
        /* old */
        background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); 
         /* new syntax */
        background-image: -webkit-radial-gradient(#ecff05, red);
        background-image: radial-gradient(#ecff05, red);
    }
    .demo2{
        background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
        background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
        background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
    }
</style>
</head>
<body>
    <div class="demo">
        <div class="demo1">径向渐变</div>
        <div class="demo2">径向渐变</div>
    </div>
</body>
</html>

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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 position
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：Comment supprimer la couleur d'arrière-plan en CSSArticle suivant：Comment supprimer la couleur d'arrière-plan en CSS

Articles Liés

Voir plus