border-image-source |
Source de la bordure d'image |
|---|---|
| CSS |
Syntaxe
| border-image-source: source|initial|inherit; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| source | Ce paramètre de propriété permet d'indiquer le chemin URL du fichier d'image : | |
| Valeur | Description | |
| url(image.ext) | Cette valeur permet d'indiquer le nom de l'image. | |
| none | Cette valeur permet d'indiquer qu'il n'y a pas d'image. | |
| inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | |
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
Description
Cette propriété permet d'indiquer le chemin et l'image utilisé comme bordure.
Remarques
- Définition et rôle : La propriété border-image-source définit l'image utilisée pour générer la bordure d'un élément. Contrairement aux bordures traditionnelles (couleurs ou styles simples), elle permet d'utiliser des images décoratives pour un rendu plus personnalisé, en apportant un aspect visuel unique à la bordure.
- Valeur par défaut : La valeur par défaut de border-image-source est none, ce qui signifie qu'aucune image n'est appliquée comme bordure. Dans ce cas, l'élément utilise les styles de bordure standard définis par border-style, border-color et border-width.
- Types d'images acceptés : border-image-source accepte divers formats d'images comme PNG, JPEG, SVG et GIF. Cela offre une grande flexibilité pour choisir des images optimisées selon les besoins visuels et les performances. Toutefois, il est conseillé d'opter pour des formats adaptés à l'usage (par exemple, SVG pour des images vectorielles redimensionnables).
- Compatibilité avec d'autres propriétés : La propriété border-image-source fonctionne en combinaison avec des propriétés comme border-image-slice, border-image-width, et border-image-repeat. Sans spécifier ces propriétés, l'image utilisée comme bordure peut apparaître déformée, mal positionnée ou mal dimensionnée.
- Gestion des bordures transparentes : Si l'image spécifiée comporte des zones transparentes (comme un PNG), ces zones seront également visibles dans la bordure générée. Cela permet de créer des effets subtils ou complexes, mais il faut veiller à ce que ces transparences ne compromettent pas la lisibilité de l'élément.
- Absence d'image source : Lorsque la valeur est définie sur none ou si l'image spécifiée ne peut pas être chargée (par exemple, une URL incorrecte), le navigateur Web revient au style de bordure classique basé sur border-style. Ce comportement garantit une certaine continuité visuelle même en cas d'erreur.
- Cas d'utilisation pratiques : border-image-source est idéal pour créer des bordures thématiques, comme des cadres décoratifs pour des photos, des bordures inspirées de textures naturelles (bois, pierre) ou des éléments graphiques spécifiques. Cela remplace souvent la nécessité d'utiliser des images de fond complexes.
- Compatibilité des navigateurs Web : Cette propriété est bien supportée par les principaux navigateurs modernes (Google Chrome, Firefox, Edge, Safari). Cependant, pour les environnements plus anciens ou obsolètes (par exemple, certaines versions d'Internet Explorer), il est conseillé de prévoir une alternative de style classique avec des bordures simples.
Voir également
Articles - URL (Uniform Resource Locator)
Dernière mise à jour : Dimanche, le 20 décembre 2015