Comment utiliser l'attribut gradient en CSS3 pour créer un effet de dégradé d'arrière-plan

Cet article parlera de l'effet du dégradé d'arrière-plan CSS3. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde

Le dégradé d'arrière-plan est un bon. effet spécial. , alors comment utiliser CSS3 pour obtenir cet effet ? Aujourd'hui, je vais partager avec vous les dégradés CSS3 sont un nouveau type d'image ajouté au module image. Les dégradés CSS3 permettent d'afficher des transitions fluides entre deux ou plusieurs couleurs spécifiées.

Les navigateurs prennent en charge deux types de dégradés :

linéaire, défini avec la fonction Linear-gradient(),

radial, défini avec radial-gradient () Définition de la fonction.

Faites attention aux problèmes de compatibilité du navigateur lors de l'utilisation

Safari, Chrome : -webkit-linear-gradient

Firefox : -moz- linéaire -gradient

IE : -ms-linear-gradient

Opéra : -o-linear-gradient

Cet article prendra le Navigateur Chrome comme exemple pour expliquer

Dégradé linéaire

Pour créer un dégradé linéaire, définissez le point de départ et la direction sous forme d'angles , De plus, pour définir des arrêts de couleur, vous devez spécifier au moins deux couleurs d'arrêt.

Dégradé linéaire de haut en bas

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

Processus de dégradé de gauche à droite

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

Dégradé linéaire (même les pauses)

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

Dégradé Radial

Un dégradé radial est défini par son centre. Au moins deux nœuds de couleur doivent être définis. Vous pouvez également spécifier le centre, la forme (cercle ou ovale) et la taille du dégradé. Par défaut, le centre. est le centre (c'est-à-dire au point central), la forme du dégradé est une 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é).

Dégradé radial centré

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

Dégradé radial personnalisé

côté le plus proche : le plus proche, coin le plus proche : coin le plus proche

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

Résumé : ce qui précède représente tout le contenu de cet article. J'espère que cet article aidera tout le monde à apprendre les dégradés.

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!