Contorno (Contorno) do CSS

(outline) A linha de contorno é uma linha desenhada ao redor da borda externa do elemento (por exemplo, botão, campo de formulário ativo, etc.) para torná-lo saliente.

Contorno (Outline) VS Borda (Border)

O contorno geralmente é usado para realçar elementos. O contorno parece muito semelhante ao contorno, mas há diferenças nos seguintes aspectos:

• O contorno não ocupa espaço, porque ele sempre é colocado no topo da caixa do elemento, o que pode levá-lo a sobrepor-se a outros elementos na página.

• Diferente da borda, o contorno não permite que ajustemos cada margem para diferentes larguras, nem podemos ajustar diferentes cores e estilos para cada margem. O contorno é idêntico em todos os aspectos.

• Além da sobreposição, o contorno não tem nenhum efeito em elementos ao redor.

• Diferente da borda, o contorno não altera o tamanho ou posição do elemento.

• O contorno pode não ser retangular.

outline-propriedade width da largura do contorno

outline-A propriedade width especifica a largura do contorno a ser adicionado ao elemento. Seu valor deve ser uma medida de comprimento CSS (px, pt, em, etc.) ou um dos termos-chave permitidos, mas não são permitidos valores em porcentagem ou negativos. Assim comoborder-widthpropriedade idêntica.

p {
　　　　outline-width: grossa;
}

outline-A propriedade style do estilo do contorno

A propriedade outline-A propriedade style define o estilo do contorno, como: sólido, pontilhado, etc.

Esta propriedade pode assumir um dos seguintes valores: none, hidden, dashed, dotted, double, groove, inset, outset, ridge e solid. Assim comoborder-styleos valores são iguais.

p {
　　　　outline-style: sólido;
}

outline-propriedade color de cor do contorno

outline-A propriedade color define a cor da contorno.

p {
　　　　outline-style: sólido;
　　　　outline-color: preto;
}

Você também pode definir outline-color para transparente.

Propriedade de atalho de contorno

A propriedade outline do CSS é uma abreviação de atalho para definir uma ou mais propriedades de contorno individuais.-style, outline-width e outline-color em uma única regra.

p {
　　　　outline:　5px sólido #9acd32;
}

Se você ignorar ou não especificar o valor de uma única propriedade de contorno ao definir a propriedade abreviada de contorno, o outline usará o valor padrão da propriedade (se houver).

Nos exemplos a seguir, o contorno será de largura5Linha preta sólida de px:

p {
　　　　color: preto;
　　　　outline:　5px sólido;
}

Mas, nas situaçõesoutline-styleSe você omitir o valor, nenhuma contorno será exibida porque o outline-O valor padrão da propriedade styleproperty é none. Se você omitir

Nos exemplos a seguir, não haverá contorno:

p {
　　　　outline:　5px #00ff00;
}

Remover a linha pontilhada ao redor do link ativo

A propriedade outline é amplamente usada para remover a linha pontilhada ao redor do link ativo.

a, a:acive, a:focus {
　　　　outline: none;　/*　Funciona no Firefox, Chrome, IE8　e acima　*/
}