Column-rule-breedte - CSS-trucs

Inhoudsopgave

De column-rule-widthCSS-eigenschap stelt de dikte van de lijn in die tussen kolommen wordt getekend column-rule-stylein een CSS-lay-out met meerdere kolommen.

.columns ( columns: 2 600px; column-rule-style: dotted; column-rule-width: 3px; )

Een andere manier om dit te doen, is door de column-rulesteno-eigenschap te gebruiken, die column-rule-width, column-rule-styleen combineert column-rule-color.

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

Syntaxis

column-rule-width: thin | medium | thick |
  • Beginwaarde: medium
  • Geldt voor: containers met meerdere kolommen
  • Overgenomen: nee
  • Berekende waarde: absolute lengte; 0als het column-rule-styleis noneofhidden
  • Animatietype: op type berekende waarde

Waarden

column-rule-width heeft een enkele benoemde, lengte of globale waarde.

/* Named values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* Length values */ column-rule-width: 15px; column-rule-width: 1.5rem; /* Global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset;

Demo

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
10+ 12+ 3.5+ 4+ 3.1+ 11.5+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
85+ 79+ Nee 3.2+ Alle
Bron: caniuse

Specificatie

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

Interessante artikelen...