Décorer le Web avec des images de bordure CSS

Auparavant, l'ajout d'éléments décoratifs aux pages Web (tels que les bordures de fantaisie) a nécessité de trancher l'image et de régler patiemment le code CSS jusqu'à ce que l'effet soit satisfaisant.

CSS simplifie désormais ce processus. Juste quelques lignes de code pour ajouter des frontières assez complexes à votre site Web. Cet article vous montrera comment procéder.

Points clés

• CSS permet d'ajouter des frontières complexes aux pages Web avec seulement quelques lignes de code, y compris l'ajout d'images d'arrière-plan sur la bordure à l'aide de la propriété border-image-source.
• border-image-slice Les propriétés appliquent l'image sélectionnée à la frontière, en divisant l'image en neuf zones: quatre coins, quatre côtés et une zone centrale. .
• border-image-width Propriétés Concevez le décalage interne dans la zone de l'image de la bordure, tandis que la propriété border-image-outset permet de pousser la zone de l'image de la bordure à l'extérieur du cadre de la bordure.
• Vous pouvez utiliser la propriété Abréviation border pour réinitialiser la propriété border-image, qui réinitialise rapidement la largeur, la couleur et le style des quatre bordures d'un élément. Au moment de la rédaction du moment de la rédaction, border-image est pleinement pris en charge dans presque tous les principaux navigateurs.

Propriétés de l'image de bordure

Une méthode courante de définition des styles de bordure consiste à utiliser les règles préréglées border-style. Ces règles comprennent: dotted, dashed, solid, double, groove, ridge, inset, outset,

et

.

Ces styles offrent déjà pas mal d'options. Cependant, vous pouvez aller plus loin et utiliser les propriétés CSS suivantes pour ajouter une image d'arrière-plan attrayante à la frontière. border-image-source

Attributs

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

Utilisez cette propriété, vous pouvez attribuer une image d'arrière-plan à la frontière d'un élément. Cette valeur est généralement l'URL de l'image:

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

Vous constaterez que l'effet de gradient CSS est tout aussi bon:

Dans le navigateur, il ressemble à ceci: none border-style Si vous définissez cette propriété sur une valeur border-style ou si l'image ne peut pas être affichée, le navigateur utilisera la valeur définie pour la propriété

. Par conséquent, il est préférable d'utiliser

comme plan de sauvegarde.

L'image que vous utilisez n'a pas besoin de correspondre à la largeur et à la hauteur de la bordure. La beauté des images de la bordure CSS est que vous n'avez besoin que d'une petite image pour décorer les bordures des éléments de toute largeur et hauteur, y compris des éléments qui s'adaptent à différentes tailles d'écran. border-image-slice

Attributs border-image-source border-image-slice Après avoir sélectionné une image avec la propriété

, vous pouvez utiliser la propriété pour l'appliquer à la frontière.

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

Apprenez plus en détail plus en détail. Cette conception de propriété provient des décalages internes en haut, à droite, en bas et à gauche. Ces décalages finiront par couper votre petite image en neuf zones: quatre coins, quatre côtés et une zone centrale.

Vous pouvez spécifier un à quatre nombres ou valeurs de pourcentage. Lorsque vous spécifiez quatre valeurs, elles sont appliquées en haut, à droite, en bas et en décalage gauche. Si vous sautez le décalage gauche, ce sera le même que le droit. Si vous avez manqué le décalage inférieur, ce sera le même que le haut. L'omission de la valeur du décalage à droite le fera la même chose que le haut. Si vous n'utilisez qu'une seule valeur, il sera utilisé pour les quatre décalages.

La valeur de pourcentage fait référence au pourcentage de taille de l'image - la largeur de l'image du décalage horizontal et la hauteur de l'image du décalage vertical.

Les nombres

représentent des pixels dans l'image ou dans le cas des images vectorielles, coordonnées. Un autre point, n'ajoutez pas px après le numéro, cela ne fonctionnera pas!

Ce qui suit est de savoir comment utiliser border-image-slice:

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

<code class="language-css">element {
  border-image-slice: 19;
}</code>

Utilisez une image de taille 100 x 100 pixels comme bordure, et son apparence est la suivante:

L'effet final est le suivant:

La zone centrale semble complètement transparente et est donc invisible. Si vous souhaitez le rendre visible, ajoutez le mot-clé fill.

Par exemple, l'utilisation d'une image avec une zone centrale complètement opaque sans ajouter le mot-clé fill sera exactement le même que l'exemple ci-dessus. Cependant, veuillez appliquer le mot-clé fill comme suit:

<code class="language-html"><div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div></code>

Utilisez une image contenant des détails dans la zone du milieu:

Ensuite, nous constatons que la zone centrale de l'image est complètement visible sur la page, bien qu'un peu floue et compressée:

border-image-width Attributs

Cette propriété est dessinée dans la zone dite de l'image de bordure. Par défaut, la limite de cette zone est la limite de la boîte de bordure. Comme la propriété border-image-slice, border-image-width conçoit des décalages internes, divisant l'image en neuf zones.

Cette propriété accepte une à quatre valeurs (en haut, à droite, en bas, à gauche) et peut utiliser des nombres ou des pourcentages. Le pourcentage est relatif à la taille de la zone de l'image de bordure, c'est-à-dire la largeur de la zone du décalage horizontal et la hauteur de la zone du décalage vertical. Si vous utilisez des nombres sans unités px, ces nombres seront égaux à des multiples de la largeur de bordure calculée correspondante. Par exemple, le code suivant:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

… Réglez la largeur de l'image de la bordure à 3 fois la valeur de largeur de bordure, c'est-à-dire 19 pixels. Les résultats sont les suivants:

J'ai constaté que l'attribution de la même valeur aux propriétés border-image-width et border-image-slice garantit que votre image de bordure est affichée dans la meilleure condition sans déformation indésirable.

border-image-outset Attributs

Toutes les propriétés que j'ai utilisées jusqu'à présent ont fait défaut dans la zone d'image de bordure intégrée. Cependant, vous pouvez choisir de pousser la zone de l'image de la bordure à l'extérieur de la boîte de bordure. Vous pouvez utiliser l'attribut border-image-outset pour l'implémenter.

Cette propriété prend une à quatre valeurs (en haut, à droite, en bas, à gauche) et est exprimée en nombres ou des unités de longueur (telles que px, em, etc.). Si vous utilisez des nombres, le résultat sera que l'image de bordure est poussée à l'extérieur de la boîte de bordure, les multiples étant la largeur de bordure calculée.

Pour illustrer davantage, j'ai dessiné un contour en pointillé vert pour représenter la frontière. La zone d'image de la bordure contient une image de bordure rose. Dans son état intégré par défaut, l'image de bordure est située dans le contour vert. Cela signifie que la zone d'image de bordure se trouve dans le cadre de la frontière.

L'ajout border-image-outset: 19px; à l'ensemble de règles CSS pousse l'image de bordure rose au-delà du contour vert pointillé. Cela signifie que la zone d'image de la bordure est tirée à l'extérieur de la bordure:

Veuillez noter que la partie de l'image de bordure située à l'extérieur de la boîte de bordure ne déclenche pas le défilement, et l'événement de la souris ne sera pas capturé.

border-image-repeat Attributs

Cette propriété fournit quelques choix sur la façon d'échapper et de trancher les tranches d'image sur les côtés et les sections intermédiaires de la bordure. La première valeur est appliquée sur le côté horizontal (haut et en bas) et la deuxième valeur est appliquée sur le côté vertical (droit et gauche). Si vous définissez une seule valeur, la valeur sera appliquée aux côtés horizontaux et verticaux.

Les valeurs disponibles incluent:

• stretch - Si vous n'utilisez pas l'attribut border-image-repeat, c'est la valeur par défaut. Ce mot-clé étire l'image pour remplir la zone disponible.
• repeat - Le carrelage d'image se répète pour remplir la zone disponible. Si la zone disponible ne peut pas être divisible par la largeur carrelée, l'image peut être coupée.
• round - Identique à repeat, mais si l'espace n'est pas suffisant pour s'adapter aux carreaux, les carreaux sont mis à l'échelle jusqu'à ce qu'ils s'adaptent tous. Cela garantit que le carrelage ne sera jamais coupé, mais l'image peut sembler un peu comprimée.
• space - Identique à repeat, mais si l'espace n'est pas un multiple exact de la largeur des tuiles, l'espace blanc supplémentaire sera réparti uniformément autour de chaque tuile.

à ce jour, Firefox semble rendre space comme le même que stretch, tandis que Chrome rend space comme le même que repeat.

border-image Attributs d'abréviation

Vous pouvez comprimer toutes les propriétés individuelles discutées ci-dessus dans les propriétés d'abréviation border-image comme suit:

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat

Ce qui suit est un extrait de code:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

Que dois-je faire si je veux supprimer l'image de la bordure?

La meilleure façon de réinitialiser la bordure est d'utiliser l'attribut Abréviation border. En utilisant border, vous pouvez rapidement réinitialiser la même largeur, la même couleur et le même style des quatre bordures d'un élément. Il n'est pas nécessaire de spécifier une règle border-image: none, et vous n'avez pas besoin de remplacer un seul attribut border-image.

Prise en charge du navigateur

au moment de la rédaction, border-image est pleinement pris en charge dans presque tous les principaux navigateurs. Seuls Firefox ne peut pas étirer les images SVG sur les éléments, Opera Mini prend en charge la syntaxe d'abréviation avec le préfixe -o-, mais ne prend pas en charge un seul attribut.

Conclusion

Cet article présente principalement les attributs border-image: les valeurs qu'il accepte, la meilleure façon d'utiliser et le niveau de support du navigateur au moment de la rédaction.

Vous pouvez trouver plus de détails dans la documentation de spécification CSS et le niveau de bordure 3.

Si vous utilisez l'attribut border-image dans votre projet, pourquoi ne pas partager le résultat final avec la communauté?

Dans l'attente de votre réponse!

FAQS (FAQ) sur la décoration des pages Web avec des images de bordure CSS

Comment créer des images de bordure CSS?

La création d'une image de bordure CSS implique l'utilisation de l'attribut border-image. Cette propriété vous permet de spécifier une image utilisée comme bordure autour de l'élément. La syntaxe de cette propriété est la suivante:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

source est l'url de l'image que vous souhaitez utiliser. slice définit le décalage intérieur de l'image. width définit la largeur de la frontière. outset détermine la distance de la zone de l'image de la bordure au-delà de la frontière. repeat Spécifie comment l'image est carrelée ou répétée.

Quels sont les différents styles de bordure dans CSS?

CSS fournit plusieurs styles de bordure que vous pouvez utiliser pour personnaliser l'apparence des éléments Web. Ceux-ci incluent: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, dotted, double ,

et

. Chaque style produit un effet visuel différent. Par exemple,

crée une bordure avec une série de points, tandis que

crée une bordure à double ligne. inset

Comment créer des bordures intégrées à l'aide de CSS?

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

Les bordures en ligne peuvent être créées dans CSS en utilisant le style de bordure

. Ce style donne l'impression que la boîte est intégrée dans la page. La syntaxe est la suivante:

border-top-style border-right-style Puis-je utiliser différents styles de bordure pour différents côtés d'un élément? border-bottom-style border-left-style Oui, CSS vous permet d'appliquer différents styles de bordure sur différents côtés d'un élément. Vous pouvez spécifier les styles de chaque côté à l'aide des propriétés

,

,

et

. border-image-width

Comment contrôler la taille de l'image de la bordure CSS?

La propriété

peut être utilisée pour contrôler la taille de l'image de la bordure CSS. Cette propriété définit la largeur de l'image de la bordure en définissant la taille de la zone de bordure. Vous pouvez spécifier la largeur dans les pixels ou en pourcentage de la boîte d'élément. linear-gradient border-image Puis-je utiliser des images de gradient comme frontières dans CSS?

Oui, CSS vous permet d'utiliser des images de gradient comme frontières. Vous pouvez créer une image dégradé à l'aide de la fonction

, puis l'utiliser comme image de bordure à l'aide de la propriété

. border-image-repeat stretch Comment faire répéter mon image de bordure CSS? repeat round L'attribut space dans CSS contrôle comment les images de bordure sont répétées. Les valeurs possibles sont stretch (par défaut), repeat, round et space.

Échelle l'image pour remplir la zone.

Image de tuile. border carreler l'image, mais l'échellez-la pour correspondre exactement. border-image carreler l'image, mais laisser de l'espace entre les carreaux.

Quelle est la différence entre l'attribut

et l'attribut border dans border-image CSS?

L'attribut dans CSS est utilisé pour définir le style, la largeur et la couleur de la bordure d'élément. D'un autre côté, la propriété vous permet d'utiliser une image comme bordure autour d'un élément.

Puis-je utiliser des images de bordure CSS avec des coins arrondis?

Oui, vous pouvez utiliser des images de bordure CSS avec des coins arrondis. Vous pouvez créer des coins arrondis à l'aide de la propriété border-radius, puis appliquer l'image de bordure à l'aide de la propriété border-image.

Comment créer une bordure en pointillés en CSS?

Les bordures en pointillés peuvent être créées dans CSS en utilisant le style de bordure dashed. La syntaxe est la suivante:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

Cela créera une bordure avec une série de lignes courtes ou de lignes pointillées.

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!