border-image-repeat |
Répétition d'image de bordure |
| CSS3 |
|
Syntaxe
|
border-image-repeat: initial|inherit|repeat|round|space|stretch;
|
Paramètres
| Paramètre |
Description |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| repeat |
Ce paramètre permet d'indiquer que l'image doit être répété en mosaïque afin de remplir la région. |
| round |
Ce paramètre permet d'indiquer que l'image doit être répété en mosaïque afin de remplir la région mais sans qu'elle effectue une demi-affichage, elle étirera les images afin que la mosaïque couvre l'espace entière. |
| space |
Ce paramètre permet d'indiquer que l'image doit être répété en mosaïque afin de remplir la région mais sans qu'elle effectue une demi-affichage, elle redistribuera plutôt l'espace équitablement entre les mosaïques. |
| stretch |
Ce paramètre permet d'indiquer qu'il faut étirer l'image afin de remplir la région. C'est la valeur par défaut. |
Description
Cette propriété permet de fixer si l'image de bordure doit avoir une répétition, des arrondissements et des étirements.
Remarques
- Définition et rôle : La propriété border-image-repeat détermine comment les images de bordure sont répétées, ajustées ou étirées pour couvrir les zones
délimitées par les bords d'un élément. Elle permet de contrôler l'apparence finale de la bordure en adaptant le comportement de l'image, que ce soit en la répétant, en la
redimensionnant ou en la découpant.
- Syntaxe et application multi-valeurs : La propriété accepte une ou deux valeurs. Avec une seule valeur, elle s'applique uniformément aux quatre côtés de
l'élément. Avec deux valeurs, la première s'applique aux bords horizontalement (haut et bas) et la seconde verticalement (gauche et droite). Cela offre une flexibilité pour
des designs asymétriques.
- Impact sur les performances : Lorsque repeat ou round est utilisé avec de petites images, cela peut entraîner de nombreux calculs et répétitions pour
remplir les bordures, ce qui peut légèrement affecter les performances. Il est donc préférable d'optimiser l'image source et de tester le rendu.
- Compatibilité avec d'autres propriétés de bordure : border-image-repeat fonctionne en conjonction avec des propriétés comme border-image-source et
border-image-slice. Sans une image spécifiée via border-image-source, cette propriété n'a aucun effet. Elle est souvent utilisée pour peaufiner le rendu final
après avoir configuré les autres propriétés liées à l'image.
- Compatibilité des navigateurs Web : Cette propriété est bien prise en charge dans les navigateurs modernes
(Google Chrome, Edge, Firefox,
Safari), mais les développeurs doivent vérifier dans des environnements plus anciens, car certaines fonctionnalités
comme space ou round peuvent ne pas être rendues correctement.
- Utilisation pratique et esthétique : border-image-repeat est particulièrement utile pour créer des bordures décoratives ou thématiques, comme des cadres
artistiques ou des bordures répétées avec des motifs (par exemple, des chaînes ou des tuiles). Cela permet d'ajouter une touche visuelle unique aux éléments sans nécessiter
de graphiques complexes en arrière-plan.
Dernière mise à jour : Dimanche, le 20 décembre 2015
