Outline-style-ominaisuus
Ominaisuus outline-style määrittää
ulkoisen äärityksen tyylin - reunuksen, joka ei vie
tilaa.
Syntaksi
valitsija {
outline-style: arvo;
}
Arvot
| Arvo | Kuvaus |
|---|---|
solid |
Yhtenäinen viiva. |
dotted |
Ääritys pisteinä. |
dashed |
Ääritys katkoviivana. |
ridge |
Ääritys kohonneena viivana. |
double |
Ääritys kaksoisviivana.
Vaikutuksen näkemiseksi äärityksen paksuuden on oltava vähintään 3px.
|
groove |
Uurteinen ääritys. |
inset |
Upotettu ääritys. |
outset |
Kohonnut ääritys. |
none |
Ei ääritystä. |
Oletusarvo: none.
Esimerkki . Arvo solid
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: solid;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo dotted
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: dotted;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo dashed
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: dashed;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo ridge
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: ridge;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo double
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: double;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo groove
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: groove;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo inset
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: inset;
outline-color: black;
width: 300px;
height: 100px;
}
:
Esimerkki . Arvo outset
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: outset;
outline-color: black;
width: 300px;
height: 100px;
}
:
Katso myös
-
ominaisuus
outline-color,
joka määrittää äärityksen värin -
ominaisuus
outline-width,
joka määrittää äärityksen paksuuden -
ominaisuus
outline,
joka on lyhennysominaisuus äärityksille -
ominaisuus
outline-offset,
joka määrittää äärityksen siirron