Štýl stĺpcového pravidla - Triky CSS

Obsah:

Anonim

Vlastnosť column-rule-styleCSS určuje typ čiary, ktorá je nakreslená medzi stĺpcami v rozložení s viac stĺpcami CSS.

Vlastnosť je sama osebe obmedzená. Keď to deklarujeme, nakreslí čiaru medzi stĺpcami CSS, ktorá je široká jeden pixel a čierna.

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

Veci sa stanú zaujímavejšími, keď začneme kombinovať column-rule-styles inými column-rule-vlastnosťami, napríklad column-rule-width(na nastavenie hrubšej čiary) a column-rule-color(na zmenu farby).

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

Alebo hej, môžeme jednoducho použiť vlastnosť column-ruleskratky, ktorá kombinuje všetky tri v jednej deklarácii:

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

Syntax

column-rule-style: ;
  • Pôvodná hodnota: none
  • Platí pre: viacstĺpcové kontajnery
  • Zdedené: č
  • Vypočítaná hodnota: zadané kľúčové slovo
  • Typ animácie: diskrétna

Hodnoty

column-rule-style akceptuje nasledujúce hodnoty:

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

Ukážka

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
10+ 12+ 3,5+ 4+ 3,2+ 11,5+
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mini
85+ 79+ Nie 3,2+ Všetky
Zdroj: caniuse

Špecifikácia

Modul rozloženia viacstĺpcov CSS úrovne 1 (návrh redaktora)