Maison > Article > interface Web > Comment définir le dégradé de couleurs en CSS
Comment définir le dégradé de couleurs en CSS
- 藏色散人original
- 2021-04-08 09:53:583239parcourir
Comment définir des dégradés de couleurs en CSS : 1. Utilisez l'attribut "Dégradés linéaires" en CSS3 pour obtenir des dégradés de couleurs linéaires ; 2. Utilisez l'attribut "Dégradés radiaux" en CSS3 pour obtenir des dégradés de couleurs radiaux.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, 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
Pour 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 dégradé linéaire de réglage 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 :
Recommandations associées : "couleurs CSS3 Dégradé linéaire propriétés : transition douce entre plusieurs couleurs (code complet ci-joint) 》
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!