A column-rule-colorpropriedade CSS determina a cor de uma linha entre as colunas em um layout CSS de várias colunas.
A propriedade não pode atuar sozinha! Para ver a cor, precisamos fazer a linha - tecnicamente chamada de “regra” - entre as colunas. Isso requer a column-rule-stylepropriedade.
.columns ( column-count: 2 600px; column-rule-style: solid; column-rule-color: #f8a100; )Ou, podemos usar a column-rulepropriedade shorthand, que combina column-rule-color, column-rule-stylee column-rule-widthem uma única declaração.
column-rule: 3px solid #f8a100;Sintaxe
column-rule-colorassume um único valor de cor. Pode ser qualquer cor CSS válida, incluindo hex, RGB, RGBa, HSL, HSLa e cores nomeadas. Até aceita currentColorcomo valor.
column-rule-color: #f8a100; column-rule-color: hsl(39,100,49); column-rule-color: rgb(250,162,0); column-rule-color: aliceblue; column-rule-color: currentColor;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 |
Especificação
Módulo de layout de múltiplas colunas CSS nível 1 (rascunho do editor)