Proprietà border-image-repeat

La proprietà border-image-repeat specifica il modo in cui viene ripetuta la parte interna del bordo rappresentata da un'immagine. Per informazioni più dettagliate fare riferimento alla proprietà border-image.

Sintassi

cssselettore {
  border-image-repeat: stretch | repeat | round;
}

Valori

Valore predefinito: stretch.

Numero di parametri

Può accettare 1 o 2 parametri. Se vengono specificati due parametri, il primo viene applicato ai bordi superiore e inferiore, mentre il secondo parametro viene applicato ai bordi sinistro e destro.

Esempio . Valore stretch

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

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

Результат:

Esempio . Valore repeat

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

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

Результат:

Esempio . Valore round

Attualmente, nello stato normale, è impostato il valore repeat, mentre al passaggio del mouse - round. Si noti che prima del passaggio del mouse nel bordo non si adatta un numero intero di rombi, mentre dopo il passaggio del mouse - sì. Ecco come funziona round:

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

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

Результат:

Esempio . Due valori

Valore repeat per la larghezza e stretch per l'altezza:

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

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

Результат:

Vedi anche