outline

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Sumário

A propriedade CSS outline é uma propriedade abreviada para configurar uma ou mais das propriedades de contorno outline-style, outline-width e outline-color em uma única declaração. Na maioria dos casos o uso abreviado é preferível e mais conveniente.

Contornos se diferenciam de bordas das seguintes maneiras:

  • Contornos não ocupam espaços, eles são desenhados acima do conteúdo.
  • Contornos podem não ser retangulares. Eles são retangulares no Gecko/Firefox. Mas por exemplo, Opera desenha uma forma não retangular em torno de uma construção como este:
    TEXTTEXTTEXT
Initial valueas each of the properties of the shorthand:
Aplica-se aall elements
Inheritednão
Midiavisual, interactive
Computed valueas each of the properties of the shorthand:
  • outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
  • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
  • outline-style: as specified
Animatableas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Sintaxe

/* largura | estilo | cor */
outline: 1px solid white;

/* Valores globais */
outline: inherit;
outline: initial;
outline: unset;

Valores

Um, dois ou três valores, dada em ordem arbitrária:

<'outline-width'>
Veja outline-width.
<'outline-style'>
Veja outline-style.
<'outline-color'>
Desde Gecko 1.9 (Firefox 3), o valor da propriedade color  (cor de primeiro plano) é usado. Veja outline-color.

Sintaxe completa

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

Exemplos

outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;

/* duas declarações identicas */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

Especificações

Especificação Estado Comentário
CSS Basic User Interface Module Level 3
The definition of 'outline' in that specification.
Candidate Recommendation No change
CSS Level 2 (Revision 1)
The definition of 'outline' in that specification.
Recommendation Initial definition

Compatibilidade de Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.5 (1.8)[1] 8.0 7.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.8) [1] 8.0 6.0 3.1

[1] Em navegadores anteriores à Gecko 1.8 (Firefox 1.5) um efeito semelhante pode ser conseguido utilizando Mozilla CSS Extension -moz-outline.

Firefox inclui elementos posicionados absolutamente dentro do contorno (bug 687311).

Etiquetas do documento e colaboradores

 Colaboradores desta página: MaurilioNovais
 Última atualização por: MaurilioNovais,