Outline-offset - Propriété CSS
Résumé des caractéristiques de la propriété outline-offset
0outline-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.
Valeurs communes à toutes les propriétés :
outline-offset: initial (0)
outline-offset: inherit
outline-offset: revert
outline-offset: revertLayer
outline-offset: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
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.
des contours
outline-offsetNavigateurs 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é outline-offset.
-
Module CSS - Interface utilisateur de base - Niveau 3
Introduction de la propriétéoutline-offsetdans le niveau 3 de la spécification.
02 Août 2002Document de travail.
07 Juillet 2015Candidat à la recommandation.
14 Décembre 2017Proposé à la recommandation.
21 Juin 2018Recommandation. -
Module CSS - Interface utilisateur de base - Niveau 4
Pas de changement concernant la propriétéoutline-offset.22 Septembre 2015Document de travail.
Voir aussi, au sujet de l'interface utilisateur.
Les spécifications éditées par le W3C sont organisées en modules. La propriété 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.