Veerusreegli stiil - CSS-trikid

Lang L: none (table-of-contents):

Anonim

column-rule-styleCSS vara täpsustab tüüpi rida, mis on vahet veergude CSS mitmeveerulise paigutuse.

Vara on omamoodi piiratud. Kui me selle deklareerime, tõmbab see CSS-veergude vahele joone, mis on ühe piksli lai ja must.

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

Asjad muutuvad huvitavamaks, kui hakkame kombineerima column-rule-styleteiste column-rule-omadustega, sealhulgas column-rule-width(paksema joone määramiseks) ja column-rule-color(värvi muutmiseks).

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

Või hei, me võime lihtsalt kasutada column-rulelühikirjeldust, mis ühendab kõik kolm ühes deklaratsioonis:

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

Süntaks

column-rule-style: ;
  • Algne väärtus: none
  • Kehtib: mitme kolonniga konteinerite kohta
  • Päritud: ei
  • Arvutatud väärtus: määratud märksõna
  • Animatsiooni tüüp: diskreetne

Väärtused

column-rule-style aktsepteerib järgmisi väärtusi:

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

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
10+ 12+ 3,5+ 4+ 3,2+ 11,5+
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mini
85+ 79+ Ei 3,2+ Kõik
Allikas: caniuse

Spetsifikatsioon

CSS-i mitme veeruga paigutusmooduli 1. tase (redaktori mustand)