Omadus outline-offset

Omadus outline-offset määrab välise kontuuri - piiri, mis ei võta ruumi - taande. Omaduse väärtuseks on mis tahes mõõtühikud, välja arvatud protsendid. Vaikeväärtus: 0. Positiivne väärtus nihutab kontuuri elemendist väljapoole, negatiivne - sissepoole.

Süntaks

valija {
	outline-offset: väärtus;
}

Näide . Positiivne väärtus

Kontuur asub elemendist eemal (element on esile tõstetud taustaga):

<div id="elem"></div>

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Näide . Negatiivne väärtus

Kontuur asub elemendi sees:

<div id="elem"></div>

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Näide . Negatiivne outline + border väärtus

Saab teha sellise huvitava efekti (pange tähele valge vahe paksust piiride vahel, see on 10px, mitte 14, kuna osa sõi ära outline oma paksusega 4px):

<div id="elem"></div>

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Vaata ka

omadus outline-width,
mis määrab kontuuri paksuse
omadus outline-style,
mis määrab kontuuri stiili
omadus outline-color,
mis määrab kontuuri värvi
omadus outline,
mis on kontuuride lühendomadus