Comment puis-je créer des bordures dégradées en CSS ?

Comment obtenir des bordures dégradées en CSS

Appliquer des dégradés aux bordures CSS, contrairement aux attentes, n'est pas aussi simple qu'il y paraît. Alors que la syntaxe border-color: -moz-linear-gradient(top, #555555, #111111); peut paraître intuitif, il ne produit pas l'effet souhaité.

Pour réussir à créer des bordures dégradées, vous devez utiliser la propriété border-image en conjonction avec border-style et border-width. L'extrait de code suivant illustre comment y parvenir :

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

L'application de ce code à un élément HTML, tel que :

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

entraînera une bordure avec un dégradé qui passe de de gauche à droite, couvrant la largeur de bordure spécifiée. Notez que border-radius ne fonctionnera pas dans ce contexte.

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!