Styl reguły kolumny - CSS-Tricks

Spisie treści:

Anonim

Właściwość column-rule-styleCSS określa typ linii, która jest rysowana między kolumnami w układzie wielokolumnowym CSS.

Nieruchomość jest sama w sobie ograniczona. Kiedy to zadeklarujemy, narysuje linię między kolumnami CSS o szerokości jednego piksela i czarną.

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

Sprawy stają się bardziej interesujące, gdy zaczynamy łączyć column-rule-stylez innymi column-rule-właściwościami, w tym column-rule-width(aby ustawić grubszą linię) i column-rule-color(aby zmienić kolor).

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

Albo, hej, możemy po prostu użyć column-ruleskróconej własności, która łączy wszystkie trzy w jednej deklaracji:

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

Składnia

column-rule-style: ;
  • Wartość początkowa: none
  • Dotyczy: kontenerów wielokolumnowych
  • Odziedziczone: nie
  • Wartość obliczona: określone słowo kluczowe
  • Typ animacji: dyskretna

Wartości

column-rule-style akceptuje następujące wartości:

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

Próbny

Wsparcie przeglądarki

TO ZNACZY Brzeg Firefox Chrom Safari Opera
10+ 12+ 3.5+ 4+ 3.2+ 11,5+
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mini
85+ 79+ Nie 3.2+ Wszystko
Źródło: caniuse

Specyfikacja

Moduł układu wielokolumnowego CSS, poziom 1 (wersja robocza redakcji)