Egenskapen outline-offset

Egenskapen outline-offset sätter avståndet för den yttre konturen - en gräns som inte tar upp plats. Värdet på egenskapen kan vara vilken enhet för storlekar som helst, förutom procent. Standardvärde: 0. Ett positivt värde förskjuter konturen utåt från elementet, ett negativt - inåt.

Syntax

cssselektor {
  outline-offset: värde;
}

Exempel . Positivt värde

Konturen förskjuts från elementet (det är markerat med bakgrund):

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

Результат:

Exempel . Negativt värde

Konturen finns inuti elementet:

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

Результат:

Exempel . Negativt värde outline + border

Man kan skapa en sådan intressant effekt (notera tjockleken på det vita mellanrummet mellan gränserna, det är 10px, inte 14, eftersom en del åts upp av outline med sin tjocklek på 4px):

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

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

Результат:

Se även