Kolumn-regel-stil - CSS-tricks

Innehållsförteckning:

Anonim

De column-rule-styleCSS egenskapen anger typ av linje som är dragen mellan kolumner i en CSS flera kolumner layout.

Fastigheten är typ av begränsad på egen hand. När vi deklarerar det drar det en linje mellan CSS-kolumner som är en pixel bred och svart.

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

Saker blir mer intressanta när vi börjar kombinera column-rule-stylemed andra column-rule-egenskaper, inklusive column-rule-width(för att ställa in en tjockare linje) och column-rule-color(för att ändra färg).

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

Eller hej, vi kan helt enkelt använda den column-rulestenografiska egenskapen som kombinerar alla tre i en enda deklaration:

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

Syntax

column-rule-style: ;
  • Ursprungligt värde: none
  • Gäller för: behållare med flera kolumner
  • Ärvt: nej
  • Beräknat värde: specificerat nyckelord
  • Animationstyp: diskret

Värden

column-rule-style accepterar följande värden:

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

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
10+ 12+ 3,5+ 4+ 3.2+ 11,5+
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mini
85+ 79+ Nej 3.2+ Allt
Källa: caniuse

Specifikation

CSS Layoutmodul för flera kolumner Nivå 1 (Editor's Draft)