outline-color

  • Raccourci de la révision : CSS/outline-color
  • Titre de la révision : outline-color
  • ID de la révision : 334093
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

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") }} pour les navigateurs le supportant, currentColor pour les autres
  • S'applique à tous les éléments
  • {{ Xref_cssinherited() }} non
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} 'invert' ou la valeur calculée de la couleur

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() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<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 class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn>{{ Cssxref("invert") }} pour les navigateurs le supportant, <code>currentColor</code> pour les autres</li>
  <li><dfn>S'applique à </dfn>tous les éléments</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn>non</li>
  <li><dfn>Média </dfn>{{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn>'invert' ou la valeur calculée de la couleur</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">
 outline-color:  &lt;color&gt; | invert | inherit
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    &lt;color&gt;&nbsp;</dt>
  <dd>
    Voir {{ Xref_csscolorvalue() }} pour les différentes notations et mot-clés possibles.</dd>
  <dt>
    invert&nbsp;</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>
<h2 id="Exemples">Exemples</h2>
<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>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li>Voir {{ Cssxref("outline") }}.</li>
</ul>
<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
<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>&nbsp;1.0</td>
        <td>1.5 (1.8)<br />
          In versions previous to 1.5: <code>-moz-outline-color</code></td>
        <td>&nbsp;8.0</td>
        <td>&nbsp;7.0</td>
        <td>&nbsp;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.&nbsp;</td>
        <td>&nbsp;8.0</td>
        <td>&nbsp;7.0</td>
        <td>&nbsp;{{ 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>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{ CSS_Reference:Outline() }}</p>
Revenir à cette révision