Comment créer un effet de bordure dégradé en utilisant CSS

Comment utiliser CSS pour créer un effet de bordure dégradée

CSS est une partie importante de la conception Web, il peut ajouter une variété d'effets aux pages Web. Parmi eux, la création d’un effet de bordure dégradée est une exigence courante. Nous pouvons facilement obtenir cet effet en utilisant la propriété CSS gradient. Cet article explique comment utiliser CSS pour créer un effet de bordure dégradée et joint des exemples de code spécifiques.

1. Bordure de dégradé linéaire

Tout d'abord, présentons comment créer un effet de bordure de dégradé linéaire. Voici un exemple de code :

<style>
.box {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue);
  border-image-slice: 1;
}
</style>

<div class="box"></div>

Dans le code ci-dessus, nous définissons une boîte de 300 pixels de large et 200 pixels de haut sur un élément nommé .box, et définissons la bordure sur une ligne continue de 5 pixels de large. Ensuite, utilisez l'attribut border-image pour créer un effet de bordure dégradée. La fonction Linear-gradient() est utilisée pour créer un dégradé linéaire, et le paramètre to right spécifie la direction du dégradé, du rouge au bleu. Enfin, définissez la largeur de la bordure du dégradé sur 1 pixel via la propriété border-image-slice. Ceci termine la production d’une bordure en dégradé linéaire.

2. Bordure de dégradé radial

Ensuite, présentons comment créer un effet de bordure de dégradé radial. Voici un exemple de code :

<style>
.box {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-image: radial-gradient(circle, red, blue);
  border-image-slice: 1;
}
</style>

<div class="box"></div>

Dans le code ci-dessus, nous utilisons la fonction radial-gradient() pour créer un dégradé radial. Le paramètre cercle dans la fonction signifie créer un dégradé radial circulaire. Ensuite, spécifiez la couleur de départ du dégradé comme rouge et la couleur de fin comme bleu. Enfin, définissez la largeur de la bordure du dégradé sur 1 pixel via la propriété border-image-slice. Ceci termine la production de la bordure de dégradé radial.

3. Plusieurs bordures dégradées

En plus d'une seule bordure dégradée, nous pouvons également créer plusieurs bordures dégradées. Voici un exemple de code :

<style>
.box {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue) linear-gradient(to bottom, green, yellow);
  border-image-slice: 1;
}
</style>

<div class="box"></div>

Dans le code ci-dessus, nous utilisons l'attribut border-image pour créer deux bordures de dégradé linéaire en même temps. La première bordure du dégradé passe du rouge au bleu et la direction du dégradé va de gauche à droite. La deuxième bordure du dégradé passe du vert au jaune et la direction du dégradé va de haut en bas. En séparant différents dégradés avec des espaces, nous pouvons obtenir l'effet de plusieurs bordures de dégradé.

En résumé, en utilisant les propriétés de dégradé de CSS, nous pouvons facilement créer une variété d'effets de bordure dégradée. Qu'il s'agisse d'une bordure à dégradé linéaire, d'une bordure à dégradé radial ou d'une bordure à dégradé multiple, il suffit de quelques lignes de code simples pour y parvenir. J'espère que l'introduction de cet article pourra aider les lecteurs à mieux utiliser CSS pour créer des effets de bordure dégradée.

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!