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

cssselector {
  outline-offset: nilai;
}

Contoh . Nilai positif

Garis luar menjauh dari elemen (elemen disorot dengan latar belakang):

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

css#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:

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

css#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):

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

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

Результат:

Lihat juga