Exemplo
Especificar o estilo da regra entre colunas:
div
{
-webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
-moz-column-rule-style: dotted; /* Firefox */
column-rule-style: dotted;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade regra de estilo coluna especifica o estilo da regra entre as colunas.
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.columnRuleStyle="dotted" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| column-rule-style | 50,0 4.0 -webkit- | 10.0 | 2.0 -moz- | 9 3.1 -webkit- | 37,0 15,0 -webkit 11.1 |
CSS Syntax
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| none | Valor padrão. Define nenhuma regra | Jogue " |
| hidden | Define uma regra escondida | Jogue " |
| dotted | Define uma regra pontilhada | Jogue " |
| dashed | Define uma regra pontilhada | Jogue " |
| solid | Define uma regra sólida | Jogue " |
| double | Define uma regra de casal | Jogue " |
| groove | Especifica uma regra ranhuras 3D. O efeito depende da largura e da cor valores | Jogue " |
| ridge | Especifica uma regra ridged 3D. O efeito depende da largura e da cor valores | Jogue " |
| inset | Especifica uma regra de inserção 3D. O efeito depende da largura e da cor valores | Jogue " |
| outset | Especifica uma regra de início 3D. O efeito depende da largura e da cor valores | 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
Coluna de contagem
Divida o texto em um <div> elemento em três colunas:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Tente você mesmo " Column-gap
Divida o texto em um <div> elemento em três colunas, e especificar um intervalo de 40 pixels entre as colunas.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Tente você mesmo " Coluna-rule
Especifique a largura, estilo e cor da regra entre as colunas.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Tente você mesmo " Páginas relacionadas
Tutorial CSS3: CSS3 várias colunas
HTML DOM de referência: columnRuleStyle property