Eigenschap in CSS -stijl
Voorbeeld
Stel een stijl in voor de omtrek:
div {outline-style: dotted;}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Een omtrek is een lijn die om elementen wordt getrokken, buiten de grenzen, om het element te laten "opvallen".
De outline-style
eigenschap specificeert de stijl van een overzicht.
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS2 |
JavaScript-syntaxis: | object .style.outlineStyle="onderbroken" |
Tips en opmerkingen
Let op: Omtreklijnen verschillen 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.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
CSS-syntaxis
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
none | Specifies no outline. This is default | |
hidden | Specifies a hidden outline | |
dotted | Specifies a dotted outline | |
dashed | Specifies a dashed outline | |
solid | Specifies a solid outline | |
double | Specifies a double outliner | |
groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Een gestippelde schets:
div {outline-style: dashed;}
Voorbeeld
Een stevige schets:
div {outline-style: solid;}
Voorbeeld
Een dubbele schets:
div {outline-style: double;}
Voorbeeld
Een groefoverzicht:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Voorbeeld
Een nokoverzicht:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Voorbeeld
Een inzetoverzicht:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Voorbeeld
Een eerste schets:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Voorbeeld
Stel de stijl van een omtrek in met verschillende waarden:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
Gerelateerde pagina's
CSS-zelfstudie: CSS-overzicht
CSS-referentie: overzichtseigenschap
HTML DOM-referentie: eigenschap outlineStyle