CSS -randzijden
CSS-rand - afzonderlijke zijden
Uit de voorbeelden op de vorige pagina's heeft u gezien dat het mogelijk is om voor elke zijde een andere rand te specificeren.
In CSS zijn er ook eigenschappen voor het specificeren van elk van de randen (boven, rechts, onder en links):
Voorbeeld
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Resultaat:
Different Border Styles
Het bovenstaande voorbeeld geeft hetzelfde resultaat als dit:
Voorbeeld
p {
border-style: dotted solid;
}
Dus, hier is hoe het werkt:
Als de border-styleeigenschap vier waarden heeft:
- border-stijl: gestippeld effen dubbel gestreept;
- bovenrand is gestippeld
- rechterrand is solide
- onderrand is dubbel
- linkerrand is onderbroken
Als de border-styleeigenschap drie waarden heeft:
- border-stijl: gestippeld effen dubbel;
- bovenrand is gestippeld
- rechter- en linkerranden zijn solide
- onderrand is dubbel
Als de border-styleeigenschap twee waarden heeft:
- randstijl: gestippeld effen;
- boven- en onderranden zijn gestippeld
- rechter- en linkerranden zijn solide
Als de border-stylewoning één waarde heeft:
- randstijl: gestippeld;
- alle vier de randen zijn gestippeld
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;
}
De border-styleeigenschap wordt gebruikt in het bovenstaande voorbeeld. Het werkt echter ook met
border-width
en border-color.