outline-style - Propriété CSS
Résumé des caractéristiques de la propriété outline-style
none
| auto
| solid
| dotted
| dashed
| double
| inset
| outset
| ridge
| groove
none
outline-style
passe d'une valeur à l'autre sans transition.Description.
Définit le type de trait utilisé pour dessiner le contour d'un élément (simple, double, pointillé, etc).
Ne confondez pas le contour et la bordure (propriétés border
) :
reportez-vous à la description de la propriété résumée outline
pour une explication détaillée des différences entre bordures et contours.
Remarque : les styles de traits pour les contours sont sensiblement les même que pour les bordures à deux différences près :
- La valeur
hidden
, valide pour les bordures ne l'est pas pour les contours. Elle serait de tout façon inutile puisque les épaisseurs des contours ne sont pas pris en compte dans la mise en page. La valeurhidden
serait donc totalement équivalente ànone
. - La valeur
auto
est disponible, alors qu'elle ne l'est pas pour les bordures.
Valeurs pour outline-style
.
- outline-style: none;
Pas de contour. C'est la valeur par défaut.
- outline-style: auto;
Le navigateur est libre de choisir le style le trait le plus approprié
- outline-style: solid;
Un trait plein.
- outline-style: double;
Un trait double.
- outline-style: dotted;
Un trait en pointillés (points).
- outline-style: dashed
Un trait en pointillés (tirets).
- outline-style: groove;
Un trait avec un effet 3D qui le présente comme une rainure en creux (1).
- outline-style: ridge;
Un trait avec un effet 3D, qui le présente comme un bourrelet (1).
- outline-style: inset;
Un trait avec effet 3D (1). Les côtés haut et gauche sont assombris, tandis que les côtés bas et à droite sont éclaircis, ce qui donne l'impression que l'élément est en creux.
- outline-style: outset;
Le contraire de
inset
: les traits en haut et à gauche sont éclaircis, tandis que les traits en bas et à droite sont assombris, ce qui donne une impression que l'élément est en relief (1). - outline-style:
initial
; outline-style:inherit
; outline-style:revert
; outline-style:revert-layer
; outline-style:unset
;La valeur initiale est :
.none
(1) Les styles de trait avec effet 3D (groove
, ridge
, inset
, outset
)
nécessitent une épaisseur de au moins 3 pixels et une couleur de luminosité intermédiaire pour être correctement restitués.
Voir la propriété outline-width
pour la gestion de l'épaisseur du trait de contour et outline-color
pour
la couleur du contour.
Animation de la propriété outline-style
.
outline-style
peut être animée, mais puisqu'elle n'accepte pas de valeurs numériques, la transition entre les valeurs
se fera de façon brutale.
Simulateur.
block
inline
Prise en charge par les navigateurs (compatibilité).
outline-style
est bien reconnue par tous les navigateurs.
outline-style
.
outline-style
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-style
.
Les spécifications CSS éditées par le W3C sont organisées en modules. outline-style
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.