O CSS a propriedade de contorno é uma propriedade confusa. Quando você aprende sobre ele pela primeira vez, é difícil entender como ele é, mesmo remotamente, diferente da propriedade da fronteira. O W3C explica que tem as seguintes diferenças:
- Os contornos não ocupam espaço.
- Os contornos podem ser não retangulares.
Os contornos não ocupam espaço
Esta afirmação, por si só, é confusa. Como um objeto em sua página da Web pode não ocupar espaço na página da Web? Mas se você pensar em sua página da Web como uma cebola, cada item da página pode ser colocado em camadas sobre outro item. A propriedade contorno não ocupa espaço porque sempre é colocada no topo da caixa do elemento.
Quando um contorno é colocado em torno de um elemento, não tem nenhum efeito sobre como esse elemento é disposto na página. Não altera o tamanho ou a posição do elemento. Se você colocar um contorno em um elemento, ele ocupará a mesma quantidade de espaço como se você não tivesse um contorno desse elemento. Isso não é verdade para um
fronteira. Uma borda em um elemento é adicionada à largura e altura externas do elemento. Então, se você tivesse um imagem que tinha 50 pixels de largura, com uma borda de 2 pixels, ocuparia 54 pixels (2 pixels para cada borda lateral). Essa mesma imagem com um contorno de 2 pixels ocuparia apenas 50 pixels de largura em sua página, o contorno seria exibido sobre a borda externa da imagem.Os contornos podem ser não retangulares
Antes de começar a pensar "legal, agora posso desenhar círculos", pense novamente. Esta declaração tem um significado diferente do que você imagina. Quando você coloca uma borda em um elemento, o navegador interpreta o elemento como se fosse uma caixa retangular gigante. Se a caixa for dividida em várias linhas, o navegador apenas deixará as bordas abertas porque a caixa não está fechada. É como se o navegador visse a borda com uma tela infinitamente ampla - larga o suficiente para que a borda seja um retângulo contínuo.
Em contraste, a propriedade contorno leva em consideração as arestas. Se um elemento delineado se estende por várias linhas, o contorno fecha no final da linha e reabre novamente na próxima linha. Se possível, o contorno também ficará totalmente conectado, criando uma forma não retangular.
Usos da propriedade Outline
Um dos melhores usos da propriedade de contorno é destacar os termos de pesquisa. Muitos sites fazem isso com uma cor de fundo, mas você também pode usar a propriedade de contorno e não se preocupar em adicionar qualquer espaçamento extra em suas páginas.
A propriedade cor do contorno aceita o termo "inverter", o que torna a cor do contorno o inverso do plano de fundo atual. Isso permite que você destaque elementos em páginas da Web dinâmicas sem a necessidade de saber o que cores são usadas.
Você também pode usar a propriedade contorno para remover a linha pontilhada ao redor dos links ativos. Este artigo de CSS-Tricks mostra como remova o contorno pontilhado.