Kolonne-regel-stil - CSS-triks

Innholdsfortegnelse:

Anonim

De column-rule-styleCSS egenskapen angir typen linje som er trukket mellom søylene i en CSS multi-kolonne layout.

Eiendommen er liksom begrenset alene. Når vi erklærer det, vil det tegne en linje mellom CSS-kolonner som er én piksel bred og svart.

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

Ting blir mer interessante når vi begynner å kombinere column-rule-stylemed andre column-rule-egenskaper, inkludert column-rule-width(for å sette en tykkere linje) og column-rule-color(for å endre farge).

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

Eller hei, vi kan ganske enkelt bruke column-rulestenografiegenskapen som kombinerer alle tre i en enkelt erklæring:

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

Syntaks

column-rule-style: ;
  • Opprinnelig verdi: none
  • Gjelder: flerkolonnebeholdere
  • Arvet: nei
  • Beregnet verdi: spesifisert nøkkelord
  • Animasjonstype: diskret

Verdier

column-rule-style aksepterer følgende verdier:

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

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
10+ 12+ 3.5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mini
85+ 79+ Nei 3.2+ Alle
Kilde: caniuse

Spesifikasjon

CSS Multi-column Layout Module Level 1 (Editor's Draft)