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

csspemilih {
  outline-offset: nilai;
}

Contoh . Nilai positif

Rangka menjarak dari elemen (ia diserlahkan 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

Rangka 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 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):

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

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

Результат:

Lihat juga