Méthode : 1. Utilisez Linear-gradient pour définir un dégradé linéaire, la syntaxe "linear-gradient(angle, color, color)" ; 2. Utilisez radial-gradient pour définir un dégradé radial, la syntaxe " ; dégradé radial (position), couleur, couleur) ».
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Les dégradés CSS3 vous permettent d'afficher des transitions fluides entre deux ou plusieurs couleurs spécifiées.
CSS3 définit deux types de dégradés :
Dégradés linéaires - Directions bas/haut/gauche/droite/diagonale
Dégradés radiaux - définis par leurs centres
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).
Exemple de paramétrage de dégradé linéaire CSS :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Rendu :
Apprentissage recommandé : 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
