outline-color

  • Raccourci de la révision : CSS/outline-color
  • Titre de la révision : outline-color
  • ID de la révision : 56685
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire page display name changed to 'outline-color'

Contenu de la révision

{{ CSSMozExtensionRef() }}

Résumé

La propriété CSS outline-color définie la couleur du contour d'un élément. Le contour est une ligne qui est dessinée autour de l'élément, au-delà lu bord extérieur de la bordure pour faire ressortir l'élément.

  • {{ Xref_cssinitial() }} : {{ Cssxref("invert") }}
    Valeur utilisée dans Gecko (Firefox) : la valeur de la propriété color
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non
  • Pourcentages: n/a
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : 'invert' ou la valeur calculée de la couleur

Depuis Mozilla 1.8 / Firefox 1.5, la propriété standar CSS2.1 {{ Cssxref("outline-color") }} est correctement supportée. Il est préférable d'utiliser {{ Cssxref("outline-color") }} plutôt que -moz-outline-color.

Syntaxe

 outline-color:  <color> | invert | inherit

Valeurs

<color> 
Voir {{ Xref_csscolorvalue() }} pour les différentes notations et mot-clés possibles.
invert 
¨Pour s'assurer que le contour est visible, une inversion de couleur de l'arrière-plan est réalisée. Ceci rend le bord plus saillant, quelque soit la couleur d'arrière-plan. Actuellement supporté seulement par Opera et IE8.

Exemples

Le code CSS suivant :

 .example {
           /* make the outline red */
           outline-color: #FF0000;
 }

produit la couleur de contour suivante pour une épaisseur de 2px :

La couleur du contour est bleu.

Spécifications

  • Voir {{ Cssxref("outline") }}.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base  1.0 1.5 (1.8)
In versions previous to 1.5: -moz-outline-color
 8.0  7.0  1.2 (125)
Valeur invert {{ CompatNo() }} Support had been dropped since 3.0 (1.9)
{{ bug("359497") }}: WONTFIX
Workaround: Use the value of the element's color property. 
 8.0  7.0  {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

{{ CSS_Reference:Outline() }}

{{ languages( { "en": "en/CSS/outline-color", "pl": "pl/CSS/-moz-outline-color" } ) }}

Source de la révision

<p>{{ CSSMozExtensionRef() }}</p>
<h3 name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La propriété CSS <code>outline-color</code> définie la couleur du contour d'un élément. Le contour est une ligne qui est dessinée autour de l'élément, au-delà lu bord extérieur de la bordure pour faire ressortir l'élément.</p>
<ul> <li>{{ Xref_cssinitial() }} : {{ Cssxref("invert") }}<br> Valeur utilisée dans Gecko (Firefox) : la valeur de la propriété <code>color</code></li> <li>S'applique à : tous les éléments</li> <li>{{ Xref_cssinherited() }} : non</li> <li><em>Pourcentages:</em> n/a</li> <li>Média : {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }} : 'invert' ou la valeur calculée de la couleur</li>
</ul>
<p>Depuis Mozilla 1.8 / Firefox 1.5, la propriété standar CSS2.1 {{ Cssxref("outline-color") }} est correctement supportée. Il est préférable d'utiliser {{ Cssxref("outline-color") }} plutôt que <code>-moz-outline-color</code>.</p>
<h3 name="Syntaxe">Syntaxe</h3>
<pre class="eval"> outline-color:  &lt;color&gt; | invert | inherit
</pre>
<h3 name="Valeurs">Valeurs</h3>
<dl> <dt>&lt;color&gt; </dt> <dd>Voir {{ Xref_csscolorvalue() }} pour les différentes notations et mot-clés possibles.</dd> <dt>invert </dt> <dd>¨Pour s'assurer que le contour est visible, une inversion de couleur de l'arrière-plan est réalisée. Ceci rend le bord plus saillant, quelque soit la couleur d'arrière-plan. Actuellement supporté seulement par Opera et IE8.</dd>
</dl>
<h3 name="Exemples">Exemples</h3>
<p>Le code CSS suivant :</p>
<pre class="deki-transform"> .example {
           /* make the outline red */
           outline-color: #FF0000;
 }
</pre>
<p>produit la couleur de contour suivante pour une épaisseur de 2px :</p>
<p class="example" style="outline: 2px solid; outline-color: blue;">La couleur du contour est bleu.</p>
<h3>Spécifications</h3>
<ul> <li>Voir {{ Cssxref("outline") }}.</li>
</ul>
<h3 name="Browser_Compatibility">Compatibilité des navigateurs</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Support de base</td> <td> 1.0</td> <td>1.5 (1.8)<br> In versions previous to 1.5: <code>-moz-outline-color</code></td> <td> 8.0</td> <td> 7.0</td> <td> 1.2 (125)</td> </tr> <tr> <td>Valeur <code>invert</code></td> <td>{{ CompatNo() }}</td> <td>Support had been dropped since 3.0 (1.9)<br> {{ bug("359497") }}: WONTFIX<br> Workaround: Use the value of the element's color property. </td> <td> 8.0</td> <td> 7.0</td> <td> {{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Voir également</h3>
<p>{{ CSS_Reference:Outline() }}</p>
<p>{{ languages( { "en": "en/CSS/outline-color", "pl": "pl/CSS/-moz-outline-color" } ) }}</p>
Revenir à cette révision