Eienskap outline-offset

Die eienskap outline-offset stel die inkeping van die buitelys vas - 'n grens wat geen spasie inneem nie. Die waarde van die eienskap is enige eenhede vir groottes, behalwe persentasies. Die verstekwaarde is: 0. 'n Positiewe waarde skuif die omlyn na buite van die element af, 'n negatiewe een - na binne.

Sintaksis

cssselektor {
  outline-offset: waarde;
}

Voorbeeld . Positiewe waarde

Die omlyn skuif van die element af (dit word met agtergrond uitgelig):

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

Результат:

Voorbeeld . Negatiewe waarde

Die omlyn is binne-in die element:

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

Результат:

Voorbeeld . Negatiewe waarde outline + border

Jy kan so 'n interessante effek maak (let op die dikte van die wit spasie tussen die grense, dit is 10px, en nie 14 nie, aangesien 'n deel deur die outline se dikte van 4px geëet is):

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

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

Результат:

Kyk ook