CSS
contouren
Zoeken…
Syntaxis
- outline: outline-color outline-style outline-width | voorletter | erven;
- omtrekbreedte: gemiddeld | dun | dik | lengte | voorletter | erven;
- schetsstijl: geen | verborgen | gestippeld | onderbroken | solide | dubbel | groef | nok | inzet | begin | voorletter | erven;
parameters
| Parameter | Details |
|---|---|
| stippel | gestippelde omtrek |
| stippel | gestippelde omtrek |
| solide | solide omtrek |
| dubbele | dubbele omtrek |
| groef | 3D gegroefde omtrek, hangt af van de omtrekkleurwaarde |
| nok | 3D geribbelde omtrek, hangt af van de omtrekkleurwaarde |
| inzet | 3D inzetomtrek, hangt af van de omtrekkleurwaarde |
| begin | 3D-omtrek, hangt af van de waarde van de omtrekkleur |
| geen | geen overzicht |
| verborgen | verborgen omtrek |
Opmerkingen
outline wordt nu beschreven in Basic UI , een CSS-module niveau 3 (het was al beschreven in REC CSS2.1)
De eigenschap Outline wordt standaard gedefinieerd in browsers voor focusseerbare elementen in :focus focusstatus.
Het mag niet worden verwijderd, zie http://outlinenone.com waarin staat:
Wat doet de omtrekeigenschap?
Het biedt visuele feedback voor koppelingen die "focus" hebben bij het navigeren door een webdocument met behulp van de TAB-toets (of equivalent). Dit is vooral handig voor mensen die geen muis kunnen gebruiken of een visuele beperking hebben. Als u de omtrek verwijdert, maakt u uw site ontoegankelijk voor deze mensen. (...)
Interessante gerelateerde voorbeelden over Stack Overflow:
Overzicht
Omtrek is een lijn die rond het element gaat, buiten de rand. In tegenstelling tot de border , nemen contouren geen ruimte in het boxmodel in. Het toevoegen van een omtrek aan een element heeft dus geen invloed op de positie van het element of andere elementen.
Bovendien kunnen contouren in sommige browsers niet-rechthoekig zijn. Dit kan gebeuren als outline wordt toegepast op een span element met tekst met verschillende eigenschappen voor de font-size . In tegenstelling tot randen kunnen omtrekken geen afgeronde hoeken hebben.
De essentiële onderdelen van de outline zijn outline-color , outline-style en outline-width .
De definitie van een schets is gelijk aan de definitie van een rand:
Een omtrek is een lijn rond een element. Het wordt weergegeven rond de marge van het element. Het verschilt echter van de eigenschap border.
outline: 1px solid black;
outline-style
De outline-style eigenschap wordt gebruikt om de stijl van de omtrek van een element in te stellen.
p {
border: 1px solid black;
outline-color:blue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}
HTML
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>
