Īpašība outline-offset

Īpašība outline-offset nosaka atkāpi ārējai apmalei - robežai, kas neaizņem vietu. Īpašības vērtība var būt jebkura izmēra vienība, izņemot procentus. Noklusējuma vērtība: 0. Pozitīva vērtība pārbīda apmali uz āru no elementa, negatīva - iekšpusē.

Sintakse

selektors {
	outline-offset: vērtība;
}

Piemērs . Pozitīva vērtība

Apmale atkāpjas no elementa (tas ir izcelts ar fona krāsu):

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

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

Piemērs . Negatīva vērtība

Apmale atrodas elementa iekšpusē:

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

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

Piemērs . Negatīva vērtība outline + border

Var izveidot šādu interesantu efektu (pievērsiet uzmanību baltās atstarpes biezumam starp robežām, tas ir 10px, nevis 14, jo daļu noēda outline ar savu biezumu 4px):

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

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

Skatiet arī

īpašība outline-width,
kura nosaka apmales biezumu
īpašība outline-style,
kura nosaka apmales stilu
īpašība outline-color,
kura nosaka apmales krāsu
īpašība outline,
kura ir saīsinājuma īpašība apmalēm