Comment définir le dégradé en CSS-tutoriel CSS-php.cn

Comment définir le dégradé en CSS

青灯夜游

Libérer： 2023-01-05 16:10:10

original

10443 Les gens l'ont consulté

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, ...);

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

Valeurs des paramètres :

< th style="max-width:90%">Valeur

Description

forme

Déterminez le type de cercle :

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>

Copier après la connexion

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>

Copier après la connexion

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