Egenskapen border-image-outset

Egenskapen border-image-outset gör det möjligt att flytta kanten utanför elementet. Som värde anges ett tal utan angivelse av måttenheter eller valfria enheter för storlekar, förutom procent. Om ett tal utan enheter anges, är det en multiplikator som multipliceras med värdet från egenskapen border-width. Negativa värden stöds inte.

För mer detaljerad information om bilder för kanter, se egenskapen border-image.

Syntax

cssselektor {
  border-image-outset: positivt tal;
}

Exempel . Tal

Sätt värdet på border-image-outset till 3 när musen hovrar över elementet. Då kommer kanten att flyttas 26px*3 - 3 gånger längre bort än dess bredd, angiven i border-width:

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

css#elem:hover {
  border-image-outset: 3;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 100px auto;
}

Результат:

Exempel . Pixlar

Sätt värdet på border-image-outset till 30px när musen hovrar över elementet. Då kommer kanten att flyttas 30px:

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

css#elem:hover {
  border-image-outset: 30px;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 50px auto;
}

Результат:

Se även