Xüsusiyyət outline-offset

Xüsusiyyət outline-offset yer tutmayan xarici konturun kənarlaşmasını təyin edir. Xüsusiyyətin dəyəri kimi faizlər istisna olmaqla, istənilən ölçü vahidləri istifadə edilə bilər. Standart dəyər: 0. Müsbət dəyər konturu elementdən kənara, mənfi dəyər isə daxilə doğru sürüşdürür.

Sintaksis

selektor {
	outline-offset: dəyər;
}

Nümunə . Müsbət dəyər

Kontur elementdən kənara sürüşüb (element fon rəngi ilə vurğulanıb):

<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ümunə . Mənfi dəyər

Kontur elementin daxilində yerləşir:

<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ümunə . Mənfi outline + border dəyəri

Belə maraqlı bir effekt yaratmaq olar (konturlar arasındakı ağ aralığın qalınlığına diqqət yetirin, o 10px-dir, 14 deyil, çünki outline öz 4px qalınlığı ilə onun bir hissəsini "yedi"):

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

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

Həmçinin baxın

konturun qalınlığını təyin edən outline-width xüsusiyyəti,
konturun stilini təyin edən outline-style xüsusiyyəti,
konturun rəngini təyin edən outline-color xüsusiyyəti,
kontur üçün qısaldılmış xüsusiyyət olan outline xüsusiyyəti