Stile regola colonna - Trucchi CSS

Sommario:

Anonim

La column-rule-styleproprietà CSS specifica il tipo di linea tracciata tra le colonne in un layout a più colonne CSS.

La proprietà è in qualche modo limitata da sola. Quando lo dichiariamo, traccerà una linea tra le colonne CSS larga un pixel e nera.

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

Le cose diventano più interessanti quando iniziamo a combinare column-rule-stylecon altre column-rule-proprietà, tra cui column-rule-width(per impostare una linea più spessa) e column-rule-color(per cambiare il colore).

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

Oppure, ehi, possiamo semplicemente usare la column-ruleproprietà stenografia che combina tutti e tre in un'unica dichiarazione:

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

Sintassi

column-rule-style: ;
  • Valore iniziale: none
  • Si applica a: contenitori a più colonne
  • Ereditato: no
  • Valore calcolato: parola chiave specificata
  • Tipo di animazione: discreta

Valori

column-rule-style accetta i seguenti valori:

/* 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

Supporto del browser

IE Bordo Firefox Cromo Safari musica lirica
10+ 12+ 3.5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ No 3.2+ Tutti
Fonte: caniuse

Specifica

Modulo layout multi-colonna CSS livello 1 (bozza del redattore)