Kolonne-regel-farve - CSS-tricks

Indholdsfortegnelse:

Anonim

Den column-rule-colorCSS ejendom bestemmer farven på en linje mellem kolonner i en CSS multi-kolonne layout.

Ejendommen kan ikke handle alene! For at se farven er vi nødt til at gøre linjen - teknisk kaldet en "regel" - mellem kolonner. Det kræver column-rule-styleejendommen.

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

Eller, kan vi bruge column-rulestenografi ejendom, der kombinerer column-rule-color, column-rule-styleog column-rule-widthi en enkelt erklæring.

column-rule: 3px solid #f8a100;

Syntaks

column-rule-colortager en enkelt farveværdi. Det kan være en hvilken som helst gyldig CSS-farve, herunder hex, RGB, RGBa, HSL, HSLa og navngivne farver. Det accepterer endda currentColorsom en værdi.

column-rule-color: #f8a100; column-rule-color: hsl(39,100,49); column-rule-color: rgb(250,162,0); column-rule-color: aliceblue; column-rule-color: currentColor;

Demo

Browsersupport

IE Edge 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+ Ingen 3.2+ Alle
Kilde: caniuse

Specifikation

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