border-image-outset - Propriété CSS
Résumé des caractéristiques de la propriété border-image-outset
0
0
border-image-outset
passe progressivement d'une valeur à une autre.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
.
length
est un nombre positif ou nul suivi d'une unité de dimension.
number
est un nombre sans unité.
Ces syntaxes peuvent être répétées de 1 à 4 fois.
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.
- border-image-outset:
initial
; border-image-outset:inherit
; border-image-outset:revert
; border-image-outset:revert-layer
; border-image-outset:unset
;La valeur initiale est :
.0
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.
border-image-outset
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que border-image-outset
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-outset
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.