Propriedade de contorno CSS
Exemplo
Defina um contorno em torno de um elemento <h2> e um elemento <div>:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
Definição e uso
Um contorno é uma linha que é desenhada em torno de elementos, fora das bordas, para fazer o elemento "se destacar".
A outline
propriedade é uma propriedade abreviada para:
- largura do contorno
- estilo de contorno (obrigatório)
- cor de contorno
Se a cor do contorno for omitida, a cor aplicada será a cor do texto.
Nota: Os contornos diferem das bordas ! Ao contrário da borda, o contorno é desenhado fora da borda do elemento e pode sobrepor outro conteúdo. Além disso, o contorno NÃO faz parte das dimensões do elemento; a largura e a altura totais do elemento não são afetadas pela largura do contorno.
Valor padrão: | cor invertida média |
---|---|
Herdado: | não |
Animavel: | sim, consulte propriedades individuais . Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | object .style.outline="#0000FF pontilhado 5px" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Sintaxe CSS
outline: outline-width outline-style outline-color|initial|inherit;
Valores de propriedade
Value | Description |
---|---|
outline-width | Specifies the width of outline |
outline-style | Specifies the style of the outline |
outline-color | Specifies the color of the outline |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Páginas relacionadas
Tutorial CSS: Esboço CSS
Referência HTML DOM: propriedade de estrutura de tópicos