Kolonnas noteikuma stils - CSS-triki

Satura rādītājs:

Anonim

Ar column-rule-styleCSS īpašuma precizēts tips līnijas, kas ir novilkta starp kolonnu CSS vairāku kolonnu izkārtojumu.

Īpašums ir sava veida ierobežots. Kad mēs to paziņosim, tas novilks līniju starp CSS kolonnām, kas ir viena pikseļa plata un melna.

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

Lietas kļūst interesantākas, kad mēs sākam kombinēt column-rule-stylear citām column-rule-īpašībām, ieskaitot column-rule-width(lai iestatītu biezāku līniju) un column-rule-color(lai mainītu krāsu).

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

Vai arī, hei, mēs varam vienkārši izmantot column-rulestenogrāfijas īpašumu, kas visus trīs apvieno vienā deklarācijā:

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

Sintakse

column-rule-style: ;
  • Sākotnējā vērtība: none
  • Attiecas uz: vairāku kolonnu konteineriem
  • Mantots: nē
  • Aprēķinātā vērtība: norādītais atslēgvārds
  • Animācijas veids: diskrēts

Vērtības

column-rule-style pieņem šādas vērtības:

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

Demonstrācija

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
10+ 12+ 3,5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mini
85+ 79+ Nē 3.2+ Viss
Avots: caniuse

Specifikācija

CSS vairāku kolonnu izkārtojuma moduļa 1. līmenis (redaktora melnraksts)