Coluna-regra-largura - CSS-Tricks

Índice:

Anonim

A column-rule-widthpropriedade CSS define a espessura da linha desenhada entre as colunas column-rule-styleem um layout CSS de várias colunas.

.columns ( columns: 2 600px; column-rule-style: dotted; column-rule-width: 3px; )

Outra maneira de fazer isso é usar a column-rulepropriedade abreviada, que combina column-rule-width, column-rule-stylee column-rule-color.

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

Sintaxe

column-rule-width: thin | medium | thick |
  • Valor inicial: medium
  • Aplica-se a: contêineres de várias colunas
  • Herdado: não
  • Valor calculado: comprimento absoluto; 0se column-rule-styleé noneouhidden
  • Tipo de animação: por tipo de valor calculado

Valores

column-rule-width leva um único valor nomeado, comprimento ou global.

/* Named values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* Length values */ column-rule-width: 15px; column-rule-width: 1.5rem; /* Global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset;

Demo

Suporte de navegador

IE Beira Raposa de fogo cromada Safári Ópera
10+ 12+ 3,5+ 4+ 3.1+ 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)