Xüsusiyyət outline-offset

Xüsusiyyət outline-offset yer tutmayan xarici konturun kənarlaşmasını təyin edir. Xüsusiyyətin dəyəri kimi faizlər istisna olmaqla, istənilən ölçü vahidləri istifadə edilə bilər. Standart dəyər: 0. Müsbət dəyər konturu elementdən kənara, mənfi dəyər isə daxilə doğru sürüşdürür.

Sintaksis

cssselektor {
  outline-offset: dəyər;
}

Nümunə . Müsbət dəyər

Kontur elementdən kənara sürüşüb (element fon rəngi ilə vurğulanıb):

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;
}

Результат:

Nümunə . Mənfi dəyər

Kontur elementin daxilində yerləşir:

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;
}

Результат:

Nümunə . Mənfi outline + border dəyəri

Belə maraqlı bir effekt yaratmaq olar (konturlar arasındakı ağ aralığın qalınlığına diqqət yetirin, o 10px-dir, 14 deyil, çünki outline öz 4px qalınlığı ilə onun bir hissəsini "yedi"):

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

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

Результат:

Həmçinin baxın