Column-rule-style - CSS-gudrybės

Turinys:

Anonim

Į column-rule-styleCSS savybė nurodo tipas linija, kuri manimi, nubrėžtos tarp stulpelių CSS kelių stulpelių maketą.

Nuosavybė yra savaime ribojama. Kai mes tai paskelbsime, ji nubrėžs liniją tarp CSS stulpelių, kurių plotis yra vienas pikselis ir juoda.

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

Viskas tampa įdomiau, kai pradedame derinti column-rule-stylesu kitomis column-rule-savybėmis, įskaitant column-rule-width(norėdami nustatyti storesnę liniją) ir column-rule-color(pakeisti spalvą).

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

Arba, hei, mes galime tiesiog naudoti column-rulestenografijos ypatybę, kuri sujungia visus tris į vieną deklaraciją:

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

Sintaksė

column-rule-style: ;
  • Pradinė vertė: none
  • Taikoma: kelių kolonų talpykloms
  • Paveldima: ne
  • Apskaičiuota vertė: nurodytas raktinis žodis
  • Animacijos tipas: diskretiškas

Vertybės

column-rule-style priima šias vertes:

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

Demonstracija

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
10+ 12+ 3,5 ir daugiau 4+ 3.2+ 11,5+
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mini“
85+ 79+ Ne 3.2+ Viskas
Šaltinis: caniuse

Specifikacija

CSS kelių stulpelių išdėstymo modulio 1 lygis (redaktoriaus juodraštis)