Atribuut outline-style
Atribuut outline-style määrab
välisääre stiili - piiri, mis ei võta
ruumi.
Süntaks
selektor {
outline-style: väärtus;
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
solid |
Pidev joon. |
dotted |
Punktidest koosnev äär. |
dashed |
Kriipsudest koosnev äär. |
ridge |
Kumer joon. |
double |
Topeltjooneline äär.
Et efekti näha, peab ääre paksus olema vähemalt 3px.
|
groove |
Nõgus äär. |
inset |
Sissepressitud äär. |
outset |
Väljaulatuw äär. |
none |
Piiri puudumine. |
Vaikeväärtus: none.
Näide . Väärtus solid
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: solid;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus dotted
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: dotted;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus dashed
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: dashed;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus ridge
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: ridge;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus double
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: double;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus groove
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: groove;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus inset
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: inset;
outline-color: black;
width: 300px;
height: 100px;
}
:
Näide . Väärtus outset
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: outset;
outline-color: black;
width: 300px;
height: 100px;
}
:
Vaata ka
-
atribuut
outline-color,
mis määrab ääre värvi -
atribuut
outline-width,
mis määrab ääre paksuse -
atribuut
outline,
mis on äärtede lühendatud atribuut -
atribuut
outline-offset,
mis määrab ääre nihke