Ciri outline-offset

Ciri outline-offset menetapkan jarak rangka luar - sempadan yang tidak mengambil ruang. Nilai bagi ciri adalah sebarang unit untuk saiz, kecuali peratus. Nilai lalai: 0. Nilai positif mengalihkan rangka ke luar dari elemen, nilai negatif - ke dalam.

Sintaks

pemilih {
	outline-offset: nilai;
}

Contoh . Nilai positif

Rangka menjarak dari elemen (ia diserlahkan dengan latar belakang):

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

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

Contoh . Nilai negatif

Rangka berada di dalam elemen:

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

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

Contoh . Nilai negatif outline + border

Anda boleh membuat kesan menarik seperti ini (perhatikan ketebalan jurang putih antara sempadan, ia 10px, bukannya 14, kerana sebahagiannya dimakan oleh outline dengan ketebalannya iaitu 4px):

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

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

Lihat juga

ciri outline-width,
yang menetapkan ketebalan rangka
ciri outline-style,
yang menetapkan gaya rangka
ciri outline-color,
yang menetapkan warna rangka
ciri outline,
yang merupakan ciri singkatan untuk rangka