/ Code Css outline-style | Résultat du code Css outline-style | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS outline-style.

<style>
.exemple-outline-style-dotted{  : dotted }
.exemple-outline-style-dashed{  : dashed }
.exemple-outline-style-solid{  : solid }
.exemple-outline-style-double{  : double }
.exemple-outline-style-groove{  : groove }
.exemple-outline-style-ridge{  : ridge }
.exemple-outline-style-inset{  : inset }

/* Annule l'outline au survole de la souris */
.exemple-outline:hover{  : none }

.exemple-outline{ outline-width : 3px; outline-color : green; border:1px solid #000 }
.exemple { border:1px solid #666; margin-bottom:10px; padding:15px; }
</style> 
<div class="exemple">
<div class="exemple-outline">outline-style par défaut</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-dotted">outline-style : dotted</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-dashed">outline-style : dashed</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-solid">outline-style : solid</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-double">outline-style : double</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-groove">outline-style : groove</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-ridge">outline-style : ridge</div>
</div>
<div class="exemple">
<div class="exemple-outline exemple-outline-style-inset">outline-style : inset</div>
</div>

Interprétation du code de la propriété outline-style CSS par votre navigateur.

outline-style par défaut
outline-style : dotted
outline-style : dashed
outline-style : solid
outline-style : double
outline-style : groove
outline-style : ridge
outline-style : inset

Interprétation normale du code de la propriété CSS outline-style (copie d'écran).

copie d'écran de l'affichage de la propriété CSS outline-style