Den column-rule-color
CSS 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-style
ejendommen.
.columns ( column-count: 2 600px; column-rule-style: solid; column-rule-color: #f8a100; )
Eller, kan vi bruge column-rule
stenografi ejendom, der kombinerer column-rule-color
, column-rule-style
og column-rule-width
i en enkelt erklæring.
column-rule: 3px solid #f8a100;
Syntaks
column-rule-color
tager 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 currentColor
som 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 |
Specifikation
CSS Multi-column Layout Module Level 1 (Editor's Draft)