Egenskaben border-image-outset

Egenskaben border-image-outset giver mulighed for at flytte rammen ud over elementets grænser. Som værdi angives et tal uden måleenheder eller enhver enhed for størrelser, bortset fra procenter. Hvis der angives et tal uden enheder, er det en multiplikator, som ganges med værdien af egenskaben border-width. Negative værdier understøttes ikke.

For mere detaljeret information om billeder til rammer, se egenskaben border-image.

Syntaks

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

Eksempel . Tal

Indstil værdien af border-image-outset til 3 ved at holde musen over elementet. Herved flyttes rammen 26px*3 - dvs. 3 gange længere væk, end dens bredde, angivet 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;
}

Результат:

Eksempel . Pixels

Indstil værdien af border-image-outset til 30px ved at holde musen over elementet. Herved flyttes rammen 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 også