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

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

<style type="text/css">
.exemple-outline-nocolor{  : dotted 3px; }
.exemple-outline{  : green dotted 3px; }
.exemple-outline-invert {  : invert dotted 3px; }
.exemple-outline-currentcolor {  : currentColor dotted 3px; }

.exemple { border:1px solid #666; margin-bottom:10px; padding:5px; }
.exemple-form{ margin-bottom:10px; }
.exemple-marges{ padding:10px; margin:20px; }
.exemple-border{ border:1px solid #000}
</style>

<form class="exemple-form">
<fieldset>
<legend>Sans classe outline</legend>
<input type="radio" value="sans outline"><br><br>
<input type="checkbox" value="sans outline"><br><br>
<input type="text" value="sans outline"><br><br>
<textarea>sans outline</textarea>
</fieldset> 
</form>
<form class="exemple-form">
<fieldset>
<legend>outline : green dotted 3px; </legend>
<input type="radio" value="avec outline" class="exemple-outline"><br><br>
<input type="checkbox" value="avec outline" class="exemple-outline"><br><br>
<input type="text" value="avec outline" class="exemple-outline"><br><br>
<textarea class="exemple-outline">avec outline</textarea>
</fieldset> 
</form>
<div class="exemple">
<span>outline : gre</span><span>en dotted 3px; </span><br><span class="exemple-outline">outline : gre</span><span class="exemple-outline">en dotted 3px; </span><br>
</div>
<div class="exemple" style="color:fuchsia">
<span>outline : inv</span><span>ert dotted 3px; </span><br><span class="exemple-outline-invert">outline : inv</span><span class="exemple-outline-invert">ert dotted 3px; </span><br>
</div>
<div class="exemple" style="color:fuchsia">
<span>outline : current</span><span>Color dotted 3px; </span><br><span class="exemple-outline-currentcolor">outline : current</span><span class="exemple-outline-currentcolor">Color dotted 3px; </span><br>
</div>
<div class="exemple" style="color:fuchsia">
<span>outline : </span><span>dotted 3px; </span><br><span class="exemple-outline-nocolor">outline : </span><span class="exemple-outline-nocolor">dotted 3px; </span><br>
</div>
<div class="exemple">
<div class="exemple-border exemple-marges exemple-outline">outline : green dotted 3px; <br>padding:10px; margin:20px; <br>border : 1px solid #000</div>
</div>
Voir de code outline dans :

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

Sans classe outline





outline : green dotted 3px;





outline : green dotted 3px;
outline : green dotted 3px;
outline : invert dotted 3px;
outline : invert dotted 3px;
outline : currentColor dotted 3px;
outline : currentColor dotted 3px;
outline : dotted 3px;
outline : dotted 3px;
outline : green dotted 3px;
padding:10px; margin:20px;
border : 1px solid #000

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

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


Aller en haut de la page

Vos paramètres de cookies

Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site.
Des contenus publicitaires vous sont aussi présentés, ainsi que cookies de partages sur les réseaux sociaux.

Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.