Border-image-outset - Propriété CSS
Résumé des caractéristiques de la propriété border-image-outset
00border-image-outset passe progressivement d'une valeur à une autre.Schéma syntaxique de border-image-outset.
Sur le schéma ci-dessus...
lengthest un nombre positif ou nul suivi d'une unité de dimension.
numberest un nombre positif sans unité.- Ces syntaxes peuvent être répétées de 1 à 4 fois.
Description de la propriété border-image-outset.
border-image-outset définit un décalage de la bordure-image vers l'extérieur de l'élément.
Elle accepte de une à quatre valeurs:
- Si une seule valeur est précisée, elle s'applique aux quatre cotés.
- Si deux valeurs sont précisées, la première définit le débordement des bordures haute et basse ; la deuxième des bordures gauche et droite.
- Si trois valeurs sont indiquées, la première définit le débordement de la bordure du haut, la deuxième celle des cotés droite et gauche et la dernière le débordement sur la bordure du bas.
- Enfin, lorsque les quatre valeurs sont indiquées, elles correspondent respectivement au débordement sur les cotés haut, droit, bas et gauche.
Sur l'exemple : ci-après la bordure image a été décalée de 20 pixels vers l'extérieur de l'élément. La couleur du fond fait apparaître les limites de l'élément.
Attention ! décaler la bordure ne change rien aux dimensions de l'élément, et donc en conséquence ne provoque pas un décalage des éléments qui suivent. La bordure image peut donc entrer en collision avec d'autres éléments.
D'autre part, et pour cette même raison que l'élément n'est pas agrandi, les événements de souris qui se produisent
sur la bordure, à l'extérieur de la surface normale de l'élément, ne seront pas traités.
Si la bordure est fortement décalée, ceci peut être déroutant pour l'utilisateur.
En déplaçant la souris sur l'exemple ci-dessous on voit que le curseur change de forme.
Ceci indique la zone qui est sensible au clic. On constate qu'elle ne s'étend pas jusqu'à la bordure.
Pour une présentation générale de l'utilisation d'images dans les bordures, reportez-vous à la propriété résumée border-image.
Syntaxes pour border-image-outset.
- border-image-outset: 10px;
Une valeur positive ou nulle, avec son unité de dimension (voir les unités CSS de dimension. La valeur par défaut est 0. La bordure-image sera décalée de la valeur indiquée, vers l'extérieur de l'élément.
Les valeurs négatives sont interdites : il n'est donc pas possible de faire pénétrer la bordure à l'intérieur de l'élément.
- border-image-outset: 2;
Une valeur positive ou nulle, sans unité. Cette valeur est un multiple de la largeur de la bordure (
border-width). - border-image-outset: 2 10 15;
De une à quatre valeurs peuvent se succéder, séparées par des espaces.
- Si une seul valeur est présente, elle s'applique à tous les côtés de l'élément/li>
- Si deux valeurs sont présentes, la première s'applique aux côtés haut et bas, la deuxième aux côtés gauche et droit.
- Si trois valeurs sont définies, la première s'applique au côté haut, la deuxième aux côtés gauche et droit, et la troisième au côté bas.
- Enfin, si quatre valeurs sont définies, elles s'appliquent successivement aux côtés haut, droit, bas et gauche.
Valeurs globales
(communes à toutes les propriétés)
border-image-outset: initial (0)
border-image-outset: inherit
border-image-outset: revert
border-image-outset: revertLayer
border-image-outset: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
Animation de la propriété border-image-outset.
La propriété border-image-outset peut être animée pour donner un effet de 'respiration', sans que les
autres éléments de la page ne soient impactés.
Attention ! Il y a un petit piège dans l'écriture de la directive @keyframes.
Dans la mesure où border-image-outset accepte des nombres sans unité ET des nombres avec une unité de dimension,
il faut veiller à ce que la clause from et la clause to soient bien exprimées dans la même unité.
C'est particulièrement trompeur avec la valeur 0 qui, d'habitude, peut être écrite sans unité sans que cela pose de problème.
Mais ici, le code suivant ne générera pas une animation progressive de 0 à 20 pixels.
@keyframes xxx {
from {border-image-outset:0;} /* erreur */
to {border-image-outset:20px;}
}
Exemple interactif.
Prise en charge par les navigateurs.
La propriété ainsi que toutes les propriétés relatives aux images de bordure sont correctement prises en charge par les navigateurs actuels.
pour des bordures
border-image-outsetNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété border-image-outset.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Première définition de la propriétéborder-image-outsetavec l'introduction des bordures-image.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi : autres caractéristiques des bordures et arrière-plans.
Les propriétés relatives aux bordures et aux arrière-plans sont décrites dans la spécification du W3C dénommée CSS Backgrounds and Borders Module. En voici la liste :