Outline-offset xususiyati

outline-offset xususiyati joy egallamaydigan tashqi çevri çizig'i - chegaraning siljishini belgilaydi. Xususiyatning qiymati foizlardan tashqari barcha o'lchov birliklari bo'lishi mumkin. Standart qiymat: 0. Musbat qiymat çevri çizig'ini elementdan tashqariga, manfiy qiymat esa ichkariga siljitadi.

Sintaksis

selector {
	outline-offset: qiymat;
}

Misol . Musbat qiymat

Çevri çizig'i elementdan (u fon bilan ajratilgan) siljiydi:

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

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

Misol . Manfiy qiymat

Çevri çizig'i element ichida joylashgan:

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

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

Misol . Outline + border uchun manfiy qiymat

Bunday qiziqarli effektni yaratish mumkin (chegaralar orasidagi oq oralıqning qalinligiga e'tibor bering, u 10px, 14 emas, chunki outline ning 4px qalinligidagi qismi uni yeb qo'ydi):

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

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

Shuningdek qarang

outline-width xususiyati,
bu çevri çizig'i qalinligini belgilaydi
outline-style xususiyati,
bu çevri çizig'i uslubini belgilaydi
outline-color xususiyati,
bu çevri çizig'i rangini belgilaydi
outline xususiyati,
bu çevri çizig'lari uchun qisqartma xususiyat hisoblanadi