Méthode de réglage : 1. Utilisez l'instruction "background:linear-gradient(gradient direction, color 1, color 2,..);" 2. Utilisez l'instruction "background:radial-gradient(shape size position, start color,. .) , terminez color);" instruction.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Gradient
Les dégradés CSS3 peuvent afficher des transitions douces entre deux ou plusieurs couleurs spécifiées. Par rapport à l'utilisation d'images dégradées, les dégradés peuvent réduire le temps de téléchargement et l'utilisation de la bande passante, et avoir une meilleure apparence lors d'un zoom avant.
Line Gradient
Les valeurs de couleur évoluent progressivement le long d'une ligne droite implicite. Produit par linear-gradient(). linear-gradient() 产生。
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
Copier après la connexion
语法
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
Copier après la connexion
示例：背景色线性渐变--background-image+linear-gradient()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景渐变--线性渐变</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='#fd0d0d', endColorstr='#d89e3c');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";
/* 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
径向渐变
radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。
同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）
语法
radial-gradient(
[shape size at position] ?
<color-stop-list> [ , <color-stop-list> ]+
)
Copier après la connexion
示例：背景色径向渐变--background-image+radial-gradient()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景渐变--径向渐变</title>
<style>
.demo{
width:500px ;
height:200px;
margin: 50px auto;
}
.demo *{
width:200px ;
height:200px;
margin: 50px 15px;
float: left;
}
.demo1{
background-image: -moz-radial-gradient(#ecff05, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
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
重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient()
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).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景渐变--重复渐变</title>
<style>
.demo{
width:500px ;
height:200px;
margin: 50px auto;
}
.demo *{
width:200px ;
height:200px;
margin: 50px 15px;
float: left;
}
.demo1{
background: repeating-linear-gradient(
to top left,
lightpink,
lightpink 5px,
white 5px,
white 10px
);
}
.demo2{
background: repeating-radial-gradient(
powderblue,
powderblue 8px,
white 8px,
white 16px
);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>Copier après la connexion
Syntaxe
rrreee
🎜🎜Exemple : Dégradé linéaire de couleur d'arrière-plan--background-image+linear-gradient()🎜🎜rrreee🎜
🎜
🎜dégradé radial🎜🎜🎜radial Le La fonction CSS -gradient() crée une image dont les valeurs de couleur s'étendent vers l'extérieur à partir d'un point central (l'origine) et passent progressivement à d'autres valeurs de couleur. 🎜🎜Vous devez également définir au moins deux nœuds de couleur, et vous pouvez également spécifier le centre du dégradé (la valeur par défaut est au point central, center), la forme (ellipse par défaut ellipse), taille (<code>coin le plus éloigné par défaut, indiquant le coin le plus éloigné) 🎜🎜🎜Syntaxe🎜🎜rrreee
-
forme : Ellipse (ellipse code>, par défaut) ou circulaire (cercle)
-
taille :
-
côté le plus proche , la forme du bord du dégradé est tangente au côté du conteneur le plus proche du point central du dégradé (cercle) ou au moins tangent aux côtés verticaux et horizontaux les plus proches du point central du dégradé (ellipse ).
-
coin le plus proche, la forme du bord du dégradé coupe le coin du conteneur le plus proche du point central du dégradé.
-
côté le plus éloigné, contrairement au côté le plus proche, la forme du bord est tangente au côté du conteneur le plus éloigné du point central du dégradé (ou au côté vertical et horizontal le plus éloigné côtés).
-
coin le plus éloigné, la forme du bord du dégradé coupe le coin du conteneur le plus éloigné du point central du dégradé.
- 🎜
position : Il peut s'agir de deux valeurs de décalage de position spécifiques (10% 20%), ou Peut être des mots-clés (gauche, droite, haut, bas)🎜
🎜🎜Exemple : dégradé radial de couleur d'arrière-plan--background-image+radial-gradient()🎜🎜rrreee🎜
🎜🎜Répéter le dégradé🎜🎜🎜Répétez le motif de dégradé plusieurs fois jusqu'à ce qu'il soit suffisant pour remplir l'élément spécifié. Produit par les fonctions repeating-linear-gradient() et repeating-radial-gradient(). 🎜🎜Les paramètres de la fonction de répétition sont les mêmes que ci-dessus, sauf qu'elle se répétera en fonction de multiples de la longueur du dégradé (la distance entre la dernière échelle de couleurs et la première). 🎜rrreee🎜🎜🎜🎜 (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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
