Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
Um esboço é uma linha que é desenhada em torno de elementos (outside the borders) para fazer o elemento "stand out" .
A propriedade de estilo esboço especifica o estilo de um esboço.
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS2 |
| sintaxe JavaScript: | object .style.outlineStyle="dashed" Try it |
Dicas e Notas
Um esboço é uma linha em torno de um elemento. É apresentada à volta da margem do elemento. No entanto, é diferente da propriedade fronteira.
O esboço não é uma peça de dimensões do elemento, portanto, largura e altura do elemento propriedades não contêm a largura do contorno.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8 | 1,5 | 1.2 | 7 |
Note: IE8 suporta a propriedade em estilo de esboço somente se um DOCTYPE é especificado!.
CSS Syntax
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| none | Especifica sem contorno. Este é o padrão | Jogue " |
| hidden | Especifica um esboço escondido | Jogue " |
| dotted | Especifica uma linha pontilhada | Jogue " |
| dashed | Especifica um contorno tracejado | Jogue " |
| solid | Especifica um contorno sólido | Jogue " |
| double | Especifica um duplo delineador | Jogue " |
| groove | Especifica um esboço ranhuras 3D. O efeito depende do valor outline-color | Jogue " |
| ridge | Especifica um esboço ridged 3D. O efeito depende do valor outline-color | Jogue " |
| inset | Especifica um esquema de inserção 3D. O efeito depende do valor outline-color | Jogue " |
| outset | Especifica um esboço início 3D. O efeito depende do valor outline-color | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Defina o estilo de um esboço utilizando valores diferentes:
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;} Tente você mesmo " Páginas relacionadas
CSS tutorial: Esboço CSS
Referência CSS: outline property
HTML DOM de referência: outlineStyle property