CSS - Outlines
Os contornos são muito semelhantes às fronteiras, mas também existem algumas diferenças importantes -
Um esboço não ocupa espaço.
Os contornos não precisam ser retangulares.
O contorno é sempre o mesmo em todos os lados; você não pode especificar valores diferentes para lados diferentes de um elemento.
NOTE - As propriedades de contorno não são suportadas pelo IE 6 ou Netscape 7.
Você pode definir as seguintes propriedades de contorno usando CSS.
o outline-width propriedade é usada para definir a largura do contorno.
o outline-style propriedade é usada para definir o estilo de linha do contorno.
o outline-color propriedade é usada para definir a cor do contorno.
o outline propriedade é usada para definir todas as três propriedades acima em uma única instrução.
A propriedade de largura do contorno
A propriedade outline-width especifica a largura do contorno a ser adicionado à caixa. Seu valor deve ser um comprimento ou um dos valores thin, medium ou thick, assim como o atributo border-width.
Uma largura de zero pixels significa nenhum contorno.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>
Isso produzirá o seguinte resultado -
A propriedade de estilo de contorno
A propriedade outline-style especifica o estilo da linha (sólida, pontilhada ou tracejada) que circunda um elemento. Pode assumir um dos seguintes valores -
none- Sem fronteira. (Equivalente à largura do contorno: 0;)
solid - O contorno é uma única linha sólida.
dotted - O contorno é uma série de pontos.
dashed - O esboço é uma série de linhas curtas.
double - O contorno tem duas linhas sólidas.
groove - O contorno parece estar esculpido na página.
ridge - O contorno parece o oposto do sulco.
inset - Contorno faz com que a caixa pareça estar embutida na página.
outset - O contorno faz com que a caixa pareça que está saindo da tela.
hidden - O mesmo que nenhum.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>
Isso produzirá o seguinte resultado -
A propriedade cor do contorno
A propriedade cor do contorno permite que você especifique a cor do contorno. Seu valor deve ser um nome de cor, uma cor hexadecimal ou um valor RGB, como ocorre com as propriedades de cor e cor da borda.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>
Isso produzirá o seguinte resultado -
O esboço da propriedade
A propriedade de contorno é uma propriedade abreviada que permite especificar valores para qualquer uma das três propriedades discutidas anteriormente em qualquer ordem, mas em uma única instrução.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>
Isso produzirá o seguinte resultado -