Comment répéter une image de bordure en utilisant CSS ?-tutoriel CSS-php.cn

Comment répéter une image de bordure en utilisant CSS ?

王林

Libérer： 2023-09-10 11:13:02

avant

994 Les gens l'ont consulté

Comment répéter une image de bordure en utilisant CSS ?

CSS (Cascading Style Sheets) est un outil puissant qui nous permet de contrôler la présentation visuelle des éléments HTML sur une page Web, y compris l'ajout d'images d'arrière-plan aux éléments. Une technique utile consiste à répéter l’image de bordure en utilisant CSS. Cela nous permet de créer des bordures intéressantes et complexes pour les éléments sans utiliser plusieurs images ni code HTML et CSS complexe.

Grammaire

Voici la syntaxe pour répéter une image de bordure en utilisant CSS -

sss - selector {
   border-image: source slice width outset repeat;
}

Copier après la connexion

Ici, source spécifie le chemin d'accès à l'image que nous voulons utiliser pour la bordure, slice spécifie comment l'image doit être découpée en parties, width précise la largeur de l'image pour la bordure, outset précise de combien l'image de bordure doit être décalée par rapport au bord de l'élément, repeat Spécifie comment l'image doit se répéter le long de la bordure.

Image de bordure

Avant de voir comment répéter une image de bordure en utilisant CSS, il est important de comprendre ce qu'est une image de bordure. Les images de bordure sont des images utilisées pour créer une bordure autour des éléments HTML. Une image de bordure est généralement un motif ou un dessin répété autour du bord d’un élément, créant ainsi un cadre décoratif.

Pour utiliser des images de bordure en CSS, nous définissons d'abord l'image à l'aide de la propriété border-image. L'attribut border-image est utilisé pour spécifier d'où vient l'image, comment l'image est découpée et comment l'image se répète sur les bords de l'élément.

Répéter l'image de bordure en utilisant CSS

Pour répéter une image de bordure en utilisant CSS, nous devons définir la propriété border-image-repeat. Cette propriété spécifie comment l'image de bordure doit être répétée autour des bords de l'élément.

L'attribut

border-image-repeat a quatre valeurs possibles -

stretch - L'image de la bordure est étirée pour remplir toute la bordure.
répéter - L'image de la bordure se répète horizontalement et verticalement pour remplir toute la bordure.
rond - L'image de la bordure se répète horizontalement et verticalement, mais est également étirée ou compressée pour s'adapter à la taille de la bordure.
espace - L'image de la bordure se répète horizontalement et verticalement, mais est également espacée pour s'adapter à la taille de la bordure.

Étapes

Pour gérer les images de bordure répétitives à l'aide de CSS, nous suivons les étapes ci-dessous -

Nous créons ou trouvons une image à utiliser comme motif de bordure.
Ensuite, nous définissons le style et la largeur de la bordure de l'élément HTML auquel nous souhaitons ajouter une bordure.
Enfin, nous utilisons la propriété CSS border-image pour spécifier quelle image nous voulons utiliser et comment elle doit être répétée. Nous pouvons spécifier le chemin d'accès au fichier image à l'aide de la fonction url() et contrôler la façon dont l'image se répète le long de la bordure à l'aide des valeurs repeat, stretch, round, ou space.

Les trois exemples suivants montrent comment répéter une image de bordure en utilisant CSS.

Exemple 1 : Utiliser une simple image de bordure

Dans cet exemple, nous allons créer une image de bordure répétitive à l'aide d'un motif simple. La bordure sera appliquée à l'élément p.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      p {
         border: 20px solid transparent;
         border-image: url('https://tutorialspoint.com/css/images/border.png') 20 repeat;
         font-size: 25px;
      }
   </style>
</head>
   <body>
      <p>Using a Simple Repeated Border Image</p>
   </body>
</html>

Copier après la connexion

Exemple 2 - Utilisation d'une image de bordure circulaire

Dans cet exemple, nous allons créer une image de bordure répétitive avec un motif circulaire. La bordure sera appliquée à l'élément p.

<html>
<head>
   <style>
      body {
         text-align: center;
      }
      p {
         border: 20px solid transparent;
         border-image: url('https://tutorialspoint.com/css/images/border.png') 20 round;
         font-size: 25px;
      }
   </style>
</head>
   <body>
      <p>Repeating border image with a circular pattern</p>
   </body>
</html>

Copier après la connexion

Exemple 3 - Utilisation d'images de bordure spatiale

Dans cet exemple, nous allons créer une image de bordure répétitive en utilisant un motif avec un espace entre chaque répétition. La bordure sera appliquée à l'élément p.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      p {
         border: 20px solid transparent;
         border-image: url('https://tutorialspoint.com/css/images/border.png') 60 space;
         font-size: 25px;
         width:500px;
         height:200px;
         margin:auto;
      }
   </style>
</head>
   <body>
      <p>Repeating border image with a space pattern</p>
   </body>
</html>

Copier après la connexion

Conclusion

L'utilisation d'images de bordures répétitives CSS est un excellent moyen d'ajouter des bordures décoratives aux éléments HTML. En utilisant la propriété border-image-repeat, nous pouvons contrôler la façon dont l'image de bordure se répète et créer des motifs et des designs intéressants.

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!