CSS -grenskante
CSS-grens - individuele kante
Uit die voorbeelde op die vorige bladsye het jy gesien dat dit moontlik is om 'n ander grens vir elke kant te spesifiseer.
In CSS is daar ook eienskappe om elk van die grense (bo, regs, onder en links) te spesifiseer:
Voorbeeld
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Resultaat:
Different Border Styles
Die voorbeeld hierbo gee dieselfde resultaat as hierdie:
Voorbeeld
p {
border-style: dotted solid;
}
So, hier is hoe dit werk:
As die border-styleeiendom vier waardes het:
- randstyl: soliede gestippelde dubbelstreep;
- boonste rand is gestippel
- regtergrens is solied
- onderste rand is dubbel
- linkergrens is gestreep
As die border-styleeiendom drie waardes het:
- rand-styl: stippel soliede dubbel;
- boonste rand is gestippel
- regter- en linkergrense is solied
- onderste rand is dubbel
As die border-styleeiendom twee waardes het:
- rand-styl: stippelvormige soliede;
- boonste en onderste rande is gestippel
- regter- en linkergrense is solied
As die border-styleeiendom een waarde het:
- grens-styl: stippel;
- al vier grense is gestippel
Voorbeeld
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
Die border-styleeiendom word in die voorbeeld hierbo gebruik. Dit werk egter ook met
border-width
en border-color.