Dégradés CSS3

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 les événements 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 - dégradés radiaux vers le bas/haut/gauche/droite/diagonal (Radial) Dégradés) - définis par leurs centres

Dégradés linéaires CSS3

Afin de créer un dégradé linéaire, vous devez définir au moins deux n?uds de couleur . Les n?uds de couleur sont les couleurs dont 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

arrière-plan?: dégradé linéaire (direction, arrêt de couleur1, arrêt de couleur2, ...);

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

L'exemple ci-dessous montre un dégradé linéaire commen?ant par le haut. Commen?ant en rouge et passant lentement au bleu?:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>線性漸變 - 從上到下</h3>
<p>從頂部開始的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Dégradé linéaire - De gauche à droite

L'exemple ci-dessous montre un dégradé linéaire partant de la gauche. Commen?ant en rouge, passant lentement au bleu?:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>線性漸變 - 從左到右</h3>
<p>從左邊開始的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Dégradé linéaire - Diagonal

Vous pouvez créer un dégradé diagonal en spécifiant une position de départ horizontale et verticale.

L'exemple suivant montre un dégradé linéaire partant du coin supérieur gauche (vers le coin inférieur droit). Commen?ant par le rouge, passant lentement au bleu?:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>線性漸變 - 對角</h3>
<p>從左上角開始（到右下角）的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Utiliser les angles

Si vous souhaitez plus de contr?le sur la direction du dégradé, vous pouvez définir un angle au lieu d'une direction prédéfinie (vers le bas, vers le haut, vers la droite, vers la gauche, vers le bas à droite, etc.).

Syntaxe

background: Linear-gradient(angle, color-stop1, color-stop2);

L'angle fait référence à l'angle entre la ligne horizontale et la ligne de dégradé, calcul du sens antihoraire. En d’autres termes, 0deg créera un dégradé de bas en haut et 90deg créera un dégradé de gauche à droite.

Cependant, veuillez noter que de nombreux navigateurs (Chrome, Safari, Fiefox, etc.) utilisent l'ancienne norme, c'est-à-dire que 0deg créera un dégradé de gauche à droite et 90deg créera un dégradé de bas en haut. haut. . Formule de conversion 90 - x = y où x est l'angle standard et y est l'angle non standard.

L'exemple suivant montre comment utiliser les angles sur un dégradé linéaire?:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad2 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad3 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad4 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(-90deg, red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>線性漸變 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Utilisation de plusieurs n?uds de couleur

L'exemple suivant montre comment pour définir plusieurs n?uds de couleur?:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, green, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad2 {
    height: 200px;
    background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad3 {
    height: 200px;
    background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
    background: linear-gradient(red 10%, green 85%, blue 90%); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>3 個顏色結(jié)點(diǎn)（均勻分布）</h3>
<div id="grad1"></div>
<h3>7 個顏色結(jié)點(diǎn)（均勻分布）</h3>
<div id="grad2"></div>
<h3>3 個顏色結(jié)點(diǎn)（不均勻分布）</h3>
<div id="grad3"></div>
<p><strong>注意：</strong> 當(dāng)未指定百分比時，顏色結(jié)點(diǎn)不會自動均勻分布。</p>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Utilisation de la transparence

Les dégradés CSS3 prennent également en charge la transparence, qui peut être utilisée pour créer un effet d'affaiblissement et de décoloration.

Pour ajouter de la transparence, nous utilisons la fonction rgba() pour définir un n?ud de couleur. Le dernier paramètre de la fonction rgba() peut être une valeur de 0 à 1 et définit la transparence de la couleur : 0 signifie entièrement transparent et 1 signifie entièrement opaque.

L'exemple ci-dessous montre un dégradé linéaire partant de la gauche. Commen?ant entièrement transparent, passant lentement au rouge entièrement opaque?:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>線性漸變 - 透明度</h3>
<p>為了添加透明度，我們使用 rgba() 函數(shù)來定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

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. Les n?uds de couleur sont les couleurs dont vous souhaitez afficher une transition douce. Dans le même temps, vous pouvez également spécifier le centre, la forme (prototype ou ellipse) 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

arrière-plan?: radial-gradient (centre, taille de la forme, couleur de départ, ..., dernière couleur);

Dégradé radial - n?ud de couleur Distribution uniforme (par défaut)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>徑向漸變 - 顏色結(jié)點(diǎn)均勻分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Dégradé radial - répartition inégale des n?uds de couleur

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>徑向漸變 - 顏色結(jié)點(diǎn)不均勻分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Définir la forme

Le paramètre de forme définit la forme. Il peut s'agir du cercle de valeurs ou de l'ellipse. Parmi eux, le cercle représente un cercle et l'ellipse représente une ellipse. La valeur par défaut est ellipse.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, green); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad2 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(circle, red, yellow, green); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>徑向漸變 - 形狀</h3>
<p><strong>橢圓形 Ellipse（默認(rèn)）：</strong></p>
<div id="grad1"></div>
<p><strong>圓形 Circle：</strong></p>
<div id="grad2"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Utilisation de mots-clés de différentes tailles

Le paramètre size définit la taille du dégradé. Il peut s'agir des quatre valeurs suivantes?:

closest-sidefarthest-sideclosest-cornerfarthest-corner

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad2 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad3 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
#grad4 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>徑向漸變 - 不同尺寸大小關(guān)鍵字的使用</h3>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner（默認(rèn)）：</strong></p>
<div id="grad4"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

repeating-radial

repeating-radial -gradient () est utilisée pour répéter le dégradé radial?:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>重復(fù)的徑向漸變</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> #grad1 { height: 200px; background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } ? #grad2 { height: 200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } ? #grad3 { height: 200px; background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */ background: linear-gradient(red 10%, green 85%, blue 90%); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } </style> </head> <body> ? <h3>3 個顏色結(jié)點(diǎn)（均勻分布）</h3> <div id="grad1"></div> ? <h3>7 個顏色結(jié)點(diǎn)（均勻分布）</h3> <div id="grad2"></div> ? <h3>3 個顏色結(jié)點(diǎn)（不均勻分布）</h3> <div id="grad3"></div> ? <p><strong>注意：</strong> 當(dāng)未指定百分比時，顏色結(jié)點(diǎn)不會自動均勻分布。</p> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p> ? </body> </html>

soumettre Réinitialiser le code

Opération automatique