Comment créer correctement des bordures de dégradé à l'aide de CSS ?

Définir des bordures de dégradé à l'aide de CSS

Concevoir une bordure à l'aide d'un effet de dégradé ajoute une touche d'intérêt visuel aux éléments Web. La propriété border-image en CSS vous permet d'appliquer des dégradés aux bordures.

Question :

Pour tenter de créer une bordure dégradée, le code suivant a été utilisé :

border-color: -moz-linear-gradient(top, #555555, #111111);

Cependant, cette approche n’a pas permis d’atteindre le résultat souhaité. Quelle est la méthode correcte pour implémenter les dégradés de bordure ?

Réponse :

La propriété border-image accomplit cette tâche. En plus de border-width et border-style, il permet des bordures dégradées.

Exemple :

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

Ce code crée une bordure avec un dégradé qui passe de #3acfd5 à #3a4ed5 de gauche à droite.

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!