CSS
konturer
Sök…
Syntax
- disposition: disposition-färg disposition-stil disposition-bredd | initial | ärva;
- konturbredd: medium | tunn | tjock | längd | initial | ärva;
- disposition-stil: ingen | dold | prickade | streckad | fast | dubbel | spår | åsen | inlägg | början | initial | ärva;
parametrar
| Parameter | detaljer |
|---|---|
| prickad | prickad disposition |
| streckad | streckad kontur |
| fast | solid kontur |
| dubbel- | dubbel disposition |
| räffla | 3D-räfflad kontur beror på konturfärgvärdet |
| bergsrygg | 3D-ridged disposition, beror på konturets färgvärde |
| infälld | 3D-inläggs disposition, beror på dispositionens färgvärde |
| början | 3D-översiktsöversikt, beror på konturfärgvärdet |
| ingen | ingen disposition |
| dold | dold kontur |
Anmärkningar
outline beskrivs nu i Basic UI , en CSS-modul nivå 3 (den har redan beskrivits i REC CSS2.1)
Konturegenskap definieras som standard i webbläsare för fokuserbara element i :focus fokusläge.
Det bör inte tas bort, se http://outlinenone.com där det står:
Vad gör dispositionsegenskapen?
Det ger visuell feedback för länkar som har "fokus" när du navigerar i ett webbdokument med hjälp av TAB-tangenten (eller motsvarande). Detta är särskilt användbart för personer som inte kan använda en mus eller har en synskada. Om du tar bort konturen gör du din webbplats otillgänglig för dessa människor. (...)
Intressanta relaterade exempel på Stack Overflow:
Översikt
Kontur är en linje som går runt elementet utanför gränsen. Till skillnad från border konturerna inte utrymme i lådmodellen. Så att lägga till en kontur till ett element påverkar inte elementets eller andra element.
Dessutom kan konturerna vara icke-rektangulära i vissa webbläsare. Detta kan hända om outline tillämpas på ett span som har text med olika font-size inuti. Till skillnad från gränser kan konturerna inte ha rundade hörn.
De väsentliga delarna av outline är outline-color , outline-style och outline-width .
Definitionen av en kontur motsvarar definitionen av en gräns:
En kontur är en linje runt ett element. Det visas runt elementets marginal. Det skiljer sig dock från gränseegenskapen.
outline: 1px solid black;
disposition-stil
Egenskapen outline-style används för att ställa in stilen för konturen för ett element.
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>
