Propriedades CSS Contorno
Um esboço é uma linha traçada em torno de um elemento - fora da fronteira. Isso pode ser usado para fazer um elemento "stand out" .
As CSS outline propriedades especificar o estilo, cor e largura de um esboço.
Este elemento tem uma borda preta fina e um contorno duplo que é 10px de largura e verde.
CSS Outline
Um outline é uma linha que é desenhada em torno de elementos (fora das fronteiras) para fazer o elemento "stand out" .
No entanto, o outline propriedade é diferente a partir da propriedade fronteira - O outline não é uma parte de dimensões de um elemento; largura total do elemento de altura e não é afectado pela largura do contorno.
Outline Estilo
O outline-style propriedade especifica o estilo do contorno.
O outline-style propriedade pode ter um dos seguintes valores:
-
dotted- Define uma linha pontilhada -
dashed- Define um contorno tracejado -
solid- Define um contorno sólido -
double- Define um contorno duplo -
groove- Define um esboço ranhuras 3D. O efeito depende do valor outline-color -
ridge- Define um esboço ridged 3D. O efeito depende do valor outline-color -
inset- Define um esboço de inserção 3D. O efeito depende do valor outline-color -
outset- Define um esboço início 3D. O efeito depende do valor outline-color -
none- Define sem contorno -
hidden- Define um esboço escondido
O exemplo a seguir primeiro define uma borda preta fina em torno de cada <p> elemento, em seguida, ele mostra as diferentes outline-style valores:
Exemplo
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Resultado:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Tente você mesmo "  | Nota: Nenhum dos outros propriedades de contorno CSS descritos abaixo terá qualquer efeito a menos que o outline-style propriedade é definida! |
|---|
delinear a cores
O outline-color propriedade é usada para definir a cor do contorno.
A cor pode ser definida por:
- Nome - especifique um nome de cor, como "red"
- RGB - especificar um valor RGB, como "rgb(255,0,0)"
- Hex - especificar um valor hexadecimal, como "#ff0000"
- invertido - realiza uma inversão de cores (o que garante que o contorno é visível, independentemente da cor de fundo)
Exemplo
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Resultado:
A colored outline.
Esboço Largura
O outline-width propriedade especifica a largura do contorno.
A largura pode ser definido como um tamanho específico (em px, pt, cm, em , etc.) ou usando uma das três valores pré-definidos: fino, médio, ou espessura.
Exemplo
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Resultado:
A thick outline.
A thinner outline.
Outline - propriedade estenográfica
Para encurtar o código, também é possível especificar todas as propriedades de contorno individuais de uma propriedade.
O outline propriedade é um atalho para as seguintes propriedades de contorno individuais:
-
outline-width -
outline-style(obrigatório) -
outline-color
Exemplo
p {
border: 1px solid black;
outline: 5px dotted red;
}Resultado:
An outline.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Todas as propriedades CSS Contorno
| Propriedade | Descrição |
|---|---|
| outline | Define todas as propriedades de contorno em uma declaração |
| outline-color | Define a cor de um esboço |
| outline-offset | Especifica o espaço entre um esboço e da borda ou margem de um elemento |
| outline-style | Define o estilo de um esboço |
| outline-width | Define a largura de um esboço |