CSS -overzicht
Een omtrek is een lijn die buiten de rand van het element wordt getrokken.
CSS-overzicht
Een omtrek is een lijn die om elementen wordt getrokken, BUITEN de randen, om het element "op te laten vallen".
CSS heeft de volgende overzichtseigenschappen:
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
Let op: Omtrek wijkt af van randen ! In tegenstelling tot de rand wordt de omtreklijn buiten de rand van het element getekend en kan deze andere inhoud overlappen. Ook maakt de omtrek GEEN deel uit van de afmetingen van het element; de totale breedte en hoogte van het element wordt niet beïnvloed door de breedte van de omtrek.
CSS-overzichtsstijl
De outline-styleeigenschap specificeert de stijl van de omtrek en kan een van de volgende waarden hebben:
dotted- Definieert een gestippelde omtrekdashed- Definieert een gestippelde omtreksolid- Definieert een solide omtrekdouble- Definieert een dubbele omtrekgroove- Defines a 3D grooved outlineridge- Defines a 3D ridged outlineinset- Defines a 3D inset outlineoutset- Defines a 3D outset outlinenone- Defines no outlinehidden- Defines a hidden outline
The following example shows the different outline-style values:
Example
Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the
outline-style property is set!