Stupac-pravilo-stil - CSS-trikovi

Sadržaj:

Anonim

U column-rule-stylevlasništva propisuje CSS tip linije koja je nacrtana između stupova u izgledu CSS više stupaca.

Imanje je nekako ograničeno samo za sebe. Kad ga proglasimo, povući će crtu između CSS stupaca širine jednog piksela i crne boje.

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

Stvari postaju zanimljivije kad se počnemo kombinirati column-rule-styles drugim column-rule-svojstvima, uključujući column-rule-width(za postavljanje deblje crte) i column-rule-color(za promjenu boje).

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

Ili, hej, jednostavno možemo koristiti column-rulestenografsko svojstvo koje kombinira sve tri u jednoj deklaraciji:

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

Sintaksa

column-rule-style: ;
  • Početna vrijednost: none
  • Odnosi se na: spremnike s više stupaca
  • Naslijeđeno: ne
  • Izračunata vrijednost: navedena ključna riječ
  • Vrsta animacije: diskretna

Vrijednosti

column-rule-style prihvaća sljedeće vrijednosti:

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

Demo

Podrška preglednika

IE Rub Firefox Krom Safari Opera
10+ 12+ 3,5+ 4+ 3,2+ 11,5+
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mini
85+ 79+ Ne 3,2+ svi
Izvor: caniuse

Specifikacija

CSS modul izgleda više stupaca razina 1 (urednikov nacrt)