Estilo de regra de coluna - CSS-Tricks

Índice:

Anonim

A column-rule-stylepropriedade CSS especifica o tipo de linha desenhada entre as colunas em um layout CSS com várias colunas.

A propriedade é limitada por conta própria. Quando o declararmos, ele desenhará uma linha entre as colunas CSS de um pixel de largura e preta.

.columns ( columns: 2 600px; column-rule-style: solid; )

As coisas ficam mais interessantes quando começamos a combinar column-rule-stylecom outras column-rule-propriedades, incluindo column-rule-width(para definir uma linha mais espessa) e column-rule-color(para alterar a cor).

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

Ou, ei, podemos simplesmente usar a column-rulepropriedade abreviada que combina todos os três em uma única declaração:

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

Sintaxe

column-rule-style: ;
  • Valor inicial: none
  • Aplica-se a: contêineres de várias colunas
  • Herdado: não
  • Valor calculado: palavra-chave especificada
  • Tipo de animação: discreto

Valores

column-rule-style aceita os seguintes valores:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

Demo

Suporte de navegador

IE Beira Raposa de fogo cromada Safári Ópera
10+ 12+ 3,5+ 4+ 3,2+ 11,5+
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mini
85+ 79+ Não 3,2+ Todo
Fonte: caniuse

Especificação

Módulo de layout de múltiplas colunas CSS nível 1 (rascunho do editor)