Column-rule-stijl - CSS-trucs

Inhoudsopgave:

De column-rule-styleCSS-eigenschap specificeert het type lijn dat wordt getekend tussen kolommen in een CSS-lay-out met meerdere kolommen.

Het pand is op zichzelf een beetje beperkt. Wanneer we het declareren, trekt het een lijn tussen CSS-kolommen die één pixel breed is en zwart.

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

Het wordt interessanter als we gaan combineren column-rule-stylemet andere column-rule-eigenschappen, waaronder column-rule-width(om een dikkere lijn in te stellen) en column-rule-color(om de kleur te veranderen).

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

Of, hey, we kunnen gewoon de column-rulesteno-eigenschap gebruiken die alle drie combineert in een enkele declaratie:

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

Syntaxis

column-rule-style: ;

Beginwaarde: none
Geldt voor: containers met meerdere kolommen
Overgenomen: nee
Berekende waarde: gespecificeerd trefwoord
Animatietype: discreet

Waarden

column-rule-style accepteert de volgende waarden:

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