Proprietà border-image-outset

La proprietà border-image-outset consente di spostare il bordo oltre i limiti dell'elemento. Come valore viene indicato un numero senza specificare unità di misura oppure qualsiasi unità per dimensioni, eccetto le percentuali. Se viene indicato un numero senza unità, allora è un moltiplicatore, per il quale viene moltiplicato il valore della proprietà border-width. I valori negativi non sono supportati.

Per informazioni più dettagliate sulle immagini per il bordo consulta la proprietà border-image.

Sintassi

cssselettore {
  border-image-outset: numero positivo;
}

Esempio . Numero

Impostiamo il valore di border-image-outset a 3 al passaggio del mouse sull'elemento. In questo caso il bordo si sposterà di 26px*3 - 3 volte più lontano della sua larghezza, impostata 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;
}

Результат:

Esempio . Pixel

Impostiamo il valore di border-image-outset a 30px al passaggio del mouse sull'elemento. In questo caso il bordo si sposterà di 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;
}

Результат:

Vedi anche