⌘K

Propriété border-image-repeat

La propriété border-image-repeat définit la manière de répéter la partie intérieure de la bordure sous forme d'image. Pour plus d'informations, consultez la propriété border-image.

Syntaxe

csssélecteur {
  border-image-repeat: stretch | repeat | round;
}

Valeurs

Nombre de paramètres Description
stretch Étire le motif de la bordure aux dimensions de l'élément. Cette valeur est utilisée par défaut.
repeat Répète le motif de la bordure.
round Répète le motif et le met à l'échelle de sorte qu'un nombre entier d'images soit présent sur le côté de l'élément.

Valeur par défaut : stretch.

Nombre de paramètres

Peut prendre 1 ou 2 paramètres. Si deux paramètres sont spécifiés, le premier sera pour les bordures supérieure et inférieure, et le second paramètre - pour les bordures gauche et droite.

Exemple . Valeur stretch

html<div id="elem"></div>
css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Exemple . Valeur repeat

html<div id="elem"></div>
css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Exemple . Valeur round

Actuellement, à l'état normal, la valeur repeat est définie, et au survol - round. Notez qu'avant le survol, un nombre non entier de losanges tient dans la bordure, tandis qu'après le survol - un nombre entier. C'est ainsi que fonctionne round : 

html<div id="elem"></div>
css#elem:hover {
  border-image-repeat: round;
}
#elem {
  border-style: solid;
  border-width: 42px;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Exemple . Deux mots

Valeur repeat pour la largeur et stretch pour la hauteur : 

html<div id="elem"></div>
css#elem {
  border-image-repeat: repeat stretch;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Voir aussi

BackPropriété border-image-sliceNextPropriété border-image-outset