Eienskap border-image-outset

Die eienskap border-image-outset laat toe om die grens buite die element te skuif. As waarde word 'n nommer sonder eenhede aangedui of enige eenhede vir groottes, behalwe persentasies. Indien 'n nommer sonder eenhede aangedui word, is dit 'n faktor waarmee die waarde van die eienskap border-width vermenigvuldig word. Negatiewe waardes word nie ondersteun nie.

Vir meer gedetailleerde inligting oor beelde vir grense, kyk na die eienskap border-image.

Sintaksis

cssselektor {
  border-image-outset: positiewe nommer;
}

Voorbeeld . Nommer

Stel die waarde van border-image-outset in op 3 wanneer die muis oor die element beweeg. Die grens sal dan verskuif na 26px*3 - met 3 keer verder as sy breedte, gespesifiseer in 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;
}

Результат:

Voorbeeld . Pixels

Stel die waarde van border-image-outset in op 30px wanneer die muis oor die element beweeg. Die grens sal dan verskuif na 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;
}

Результат:

Sien ook