Coloană-regulă-stil - CSS-Tricks

Cuprins:

Anonim

Proprietatea column-rule-styleCSS specifică tipul de linie trasată între coloane într-un aspect CSS cu mai multe coloane.

Proprietatea este cam limitată singură. Când îl declarăm, va trasa o linie între coloanele CSS care are un pixel lățime și negru.

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

Lucrurile devin mai interesante atunci când începem să combinăm column-rule-stylecu alte column-rule-proprietăți, inclusiv column-rule-width(pentru a seta o linie mai groasă) și column-rule-color(pentru a schimba culoarea).

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

Sau, hei, putem folosi pur și simplu column-ruleproprietatea stenogramă care le combină pe toate într-o singură declarație:

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

Sintaxă

column-rule-style: ;
  • Valoarea initiala: none
  • Se aplică: containerelor cu mai multe coloane
  • Moștenit: nu
  • Valoare calculată: cuvânt cheie specificat
  • Tipul de animație: discret

Valori

column-rule-style acceptă următoarele 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

Suport pentru browser

IE Margine Firefox Crom Safari Operă
Peste 10 ani 12+ 3.5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Browser Android Safari iOS Opera mini
Peste 85 de ani Peste 79 de ani Nu 3.2+ Toate
Sursa: caniuse

Specificație

CSS Multi-column Layout Module Level 1 (Proiect editor)