outline-offset Özelliği

outline-offset özelliği, yer kaplamayan dış anahat çizgisinin ofsetini belirler. Özelliğin değeri, yüzde birimleri hariç herhangi bir boyut birimi olabilir. Varsayılan değer: 0. Pozitif bir değer anahat çizgisini öğenin dışına doğru kaydırır, negatif bir değer ise içe doğru kaydırır.

Sözdizimi

seçici {
	outline-offset: değer;
}

Örnek . Pozitif değer

Anahat çizgisi öğeden uzaklaşır (öğe arka plan rengi ile vurgulanmıştır):

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

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

Örnek . Negatif değer

Anahat çizgisi öğenin içindedir:

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

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

Örnek . Negatif outline + border değeri

Şu ilginç efekt oluşturulabilir (sınırlar arasındaki beyaz boşluğun kalınlığına dikkat edin, 10px'dir, 14 değil, çünkü bir kısmını outline'ın 4px kalınlığı kaplar):

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

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

Ayrıca Bakınız

outline-width özelliği,
anahat çizgisinin kalınlığını belirler
outline-style özelliği,
anahat çizgisinin stilini belirler
outline-color özelliği,
anahat çizgisinin rengini belirler
outline özelliği,
anahat çizgileri için kısa yazım özelliğidir