Egenskapen border-image-outset

Egenskapen border-image-outset lar deg forskyve rammen utenfor elementet. Som verdi angis et tall uten målenheter eller andre enheter for størrelser, unntatt prosent. Hvis det er angitt et tall uten enheter, er det en multiplikator som multipliseres med verdien av egenskapen border-width. Negative verdier støttes ikke.

For mer detaljert informasjon om bilder for rammer, se egenskapen border-image.

Syntaks

cssvelger {
  border-image-outset: positivt tall;
}

Eksempel . Tall

La oss sette verdien border-image-outset til 3 når musepekeren holdes over elementet. Dermed vil rammen flyttes 26px*3 - 3 ganger lenger enn bredden, satt 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 . Piksler

La oss sette verdien border-image-outset til 30px når musepekeren holdes over elementet. Dermed vil rammen flyttes 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å