Styl sloupcového pravidla - Triky CSS

Obsah:

Anonim

Vlastnost column-rule-styleCSS určuje typ čáry nakreslené mezi sloupci v rozložení více sloupců CSS.

Vlastnost je sama o sobě omezená. Když to deklarujeme, nakreslí čáru mezi sloupci CSS o šířce jednoho pixelu a černou.

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

Věci se stanou zajímavějšími, když začneme kombinovat column-rule-styles dalšími column-rule-vlastnostmi, včetně column-rule-width(pro nastavení silnější čáry) a column-rule-color(pro změnu barvy).

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

Nebo můžeme jednoduše použít vlastnost column-rulezkratky, která kombinuje všechny tři v jediné deklaraci:

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

Syntax

column-rule-style: ;
  • Počáteční hodnota: none
  • Platí pro: vícesloupcové kontejnery
  • Zděděno: ne
  • Vypočítaná hodnota: zadané klíčové slovo
  • Typ animace: diskrétní

Hodnoty

column-rule-style přijímá následující 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ázka

Podpora prohlížeče

TJ Okraj Firefox Chrome Safari Opera
10+ 12+ 3,5+ 4+ 3,2+ 11,5+
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mini
85+ 79+ Ne 3,2+ Všechno
Zdroj: caniuse

Specifikace

CSS Multi-column Layout Module Level 1 (Koncept redakce)