border-image-repeat CSS propriété

Définition de la CSS border-image-repeat.

La propriété de bordure d'image CSS border-image-repeat permet de spécifier la manière dont se répète l'image pour les quatre bordures d'image Css d'un élément.

Exemple de syntaxe CSS border-image-repeat :
border-image-repeat : space;
border-image-repeat : stretch round;

La propriété de feuille de style border-image-repeat CSS peut pendre une ou deux valeurs séparées par un espace :

  • stretch, le motif de répétition de l'image de bordure Css est étirée pour remplir l'espace de la bordure Css. Valeur par défaut.
  • repeat : le motif de répétition de l'image de bordure Css est répété pour remplir l'espace de la bordure Css.
  • space : le motif de répétition de l'image de bordure Css est répété pour remplir l'espace de la bordure Css.
    S'il ne remplit pas la zone avec un nombre entier de motif, alors l'espace restant est réparti entre les motifs.
  • round : le motif de répétition de l'image de bordure Css est étirée pour remplir l'espace de la bordure Css.
    S'il ne remplit pas la zone avec un nombre entier de motif, alors le motif est redimensionné pour pouvoir avoir un nombre entier de mosaïques.
  • inherit : hérite de la répétition de la bordure d'image Css de son parent.

Conditions d'application de la CSS border-image-repeat.

La propriété de bordure d'image CSS border-image-repeat est applicable sur l'ensemble des balises HTML ou XHTML et au pseudo-élément CSS . Sauf sur les éléments de tableaux si la propriété Css à la valeur collapse.
La répétition ne s'applique que si la propriété de bordure d'image Css border-image-slice a été définie.

La valeur de la CSS border-image-repeat peut être mise directement dans la propriété de raccourci CSS .

Héritage des valeurs Css de border-image-repeat.

La propriété de bordure d'image CSS border-image-repeat n'est pas héritée.

Problème d'interprétation de border-image-repeat en Css.

La propriété de bordure d'image CSS border-image-repeat ne pose pas un problème d'interprétation. Cependant, il existe un bug lié à border-style voir le bug dans border-image.

Règles de syntaxes CSS pour border-image-repeat.

Règle d'écriture de border-image-repeat

Si la propriété de bordure d'image CSS border-image-repeat est suivie d'une valeur, la répétition de la bordure image est appliquée à toutes les bordures images css.

Exemple d'écriture CSS de border-image-repeat : 
.identifiant{
  border-image-repeat : round;
}

Si la propriété CSS border-image-repeat est suivie de deux valeurs, la première est la répétition des bordures images Css horizontales (haute, basse) et la seconde celle des bordures images Css verticales (droite, gauche).

Exemple d'écriture CSS de border-image-repeat : 
.identifiant{
  border-image-repeat : space stretch;
}

Influence de la propiété de bordure d'image Css border-image-slice sur la répétition

Si la propriété de bordure d'image Css n'a pas été définie pour spécifier les différentes zones de motifs, alors la répétition de l'image de bordure Css ne se fait pas.

Compatibilités navigateurs de la propriété border-image-repeat

Détails des versions de la CSS border-image-repeat
Résumé du support navigateurs de la CSS border-image-repeat

Votre avis sur la définition border-image-repeat en CSS

Votez pour la définition CSS border-image-repeat

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/border-image-repeat-css.html Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.