outline-offset - Propriété CSS
Résumé des caractéristiques de la propriété outline-offset
0
outline-offset
passe progressivement d'une valeur à une autre.Description de la propriété outline-offset
.
La propriété outline-offset
définit l'espace entre le contour et l'élément.
Pour plus de précisions sur les contours, reportez-vous à la propriété outline
.
Voici sur 3 exemples l'effet de outline-offset
(le contour est le trait en vert) :
Pas d'offset : le contour est juste sur le bord de l'élément
Un offset positif : le contour est éloigné de l'élément
Un offset négatif : le contour se retrouve à l'intérieur de l'élément
Valeurs pour outline-offset
.
- outline-offset: 5px;
L'espace entre le contour et l'élément est déterminé par la valeur indiquée. C'est une valeur positive ou négative, suivie d'une unité de dimension Voir les unités CSS de dimension. Les pourcentages ne sont pas acceptés.
Par défaut, le contour est collé à l'élément, sans espace.
Si une valeur négative est indiquée et se trouve supérieure à une des dimensions de l'élément, par exemple sa hauteur, la valeur de l'offset sera réduite pour que le contour reste affichable.
- outline-offset:
initial
; outline-offset:inherit
; outline-offset:revert
; outline-offset:revert-layer
; outline-offset:unset
;La valeur initiale est :
.0
Animation de la propriété outline-offset
.
L'effet ci-dessous a té obtenu en animant les propriétés outline-offset
et outline-color
.
La forme circulaire est un élément div carré, avec un arrondi de 50% dans chacun des angles.
Simulateur.
Ajustez la valeur de outline-offset
et observez le résultat ci-dessous. Le simulateur applique l'offset sur un élément du type block
et sur un élément du type inline
.
Rappelons que les valeurs négatives sont acceptées, mais pas les pourcentages.
outline-offset
appliquée àun élément du type block
.
outline-offset
appliquée à un élément inline (span)
fragmenté sur plusieurs lignes
Prise en charge de outline-offset
par les navigateurs.
Tous les navigateurs actuels reconnaissent et traitent correctement la propriété outline-offset
.
outline-offset
.
outline-offset
Navigateurs 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
Oméra mini
Voir aussi, dans le même module de standardisation que outline-offset
.
Les spécifications CSS éditées par le W3C sont organisées en modules. outline-offset
fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.