Qu'est-ce que CSS3 définit la syntaxe du dégradé ?-Questions et réponses frontales-php.cn

Qu'est-ce que CSS3 définit la syntaxe du dégradé ?

WBOY

Libérer： 2022-03-29 14:53:39

original

1924 Les gens l'ont consulté

css3 définit la syntaxe du dégradé comme : 1. "dégradé linéaire (direction du dégradé, couleur 1, couleur 2, ...);", utilisé pour définir des dégradés linéaires 2. "dégradé radial (taille du dégradé de type cercle) Dégradé ; position, couleur 1, couleur 2);" est utilisé pour définir un dégradé radial.

Qu'est-ce que CSS3 définit la syntaxe du dégradé ?

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

Qu'est-ce que CSS3 définit la syntaxe des dégradés ?

Les dégradés CSS3 vous permettent d'afficher des transitions fluides entre deux ou plusieurs couleurs spécifiées.

Auparavant, il fallait utiliser des images pour obtenir ces effets. Cependant, en utilisant les dégradés CSS3, vous pouvez réduire le temps de téléchargement et l'utilisation de la bande passante. De plus, les éléments avec des dégradés sont plus beaux lorsqu'ils sont zoomés, car le dégradé est généré par le navigateur.

CSS3 définit deux types de dégradés :

Dégradés linéaires - Bas/Haut/Gauche/Droite/Diagonale
Dégradés radiaux (Dégradés radiaux) - Défini par leurs centres

CSS3 Dégradés linéaires

Afin de créer un dégradé linéaire, vous devez définir au moins deux nœuds de couleur. Le nœud de couleur est la couleur pour laquelle vous souhaitez afficher une transition douce. En même temps, vous pouvez également définir un point de départ et une direction (ou un angle).

Syntaxe

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

Copier après la connexion

Dégradé linéaire - de haut en bas (par défaut)

L'exemple ci-dessous montre un dégradé linéaire commençant par le haut. En partant du rouge, en passant lentement au bleu :

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
#grad1 {
    height: 200px;
background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

Copier après la connexion

Sortie :

Quest-ce que CSS3 définit la syntaxe du dégradé ?

Dégradé radial CSS3

Un dégradé radial est défini par son centre.

Afin de créer un dégradé radial, vous devez également définir au moins deux nœuds de couleur. Le nœud de couleur est la couleur pour laquelle vous souhaitez afficher une transition douce. Dans le même temps, vous pouvez également spécifier le centre, la forme (cercle ou ovale) et la taille du dégradé. Par défaut, le centre du dégradé est centre (c'est-à-dire au point central), la forme du dégradé est ellipse (c'est-à-dire une ellipse) et la taille du dégradé est le coin le plus éloigné (c'est-à-dire le coin le plus éloigné).

Syntaxe

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

Copier après la connexion

Dégradé radial - les nœuds de couleur sont répartis uniformément (par défaut)

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

Copier après la connexion

Résultats de sortie :

Quest-ce que CSS3 définit la syntaxe du dégradé ?