Properti outline-offset

Properti outline-offset mengatur jarak offset untuk garis luar - batas yang tidak memakan ruang. Nilai properti ini dapat berupa satuan ukuran apa pun, kecuali persen. Nilai default: 0. Nilai positif menggeser garis luar ke luar dari elemen, nilai negatif - ke dalam.

Sintaks

selector {
	outline-offset: nilai;
}

Contoh . Nilai positif

Garis luar menjauh dari elemen (elemen disorot 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

Garis luar 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 dapat membuat efek menarik seperti ini (perhatikan ketebalan celah putih antara batas, yaitu 10px, bukan 14, karena sebagian "dimakan" oleh outline dengan ketebalan 4px):

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

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

Lihat juga

properti outline-width,
yang mengatur ketebalan garis luar
properti outline-style,
yang mengatur gaya garis luar
properti outline-color,
yang mengatur warna garis luar
properti outline,
yang merupakan properti singkatan untuk garis luar