Proprietà border-image-width

La proprietà border-image-width controlla la larghezza della parte visibile del bordo, la scala. Se questo valore è maggiore della larghezza di border-width, l'immagine del bordo striscerà sotto il contenuto.

Per informazioni più dettagliate, vedere la proprietà border-image.

Sintassi

cssselettore {
  border-image-width: unità CSS | percentuali | numero | auto;
}

Valori

Valore predefinito: 1.

Esempio . Numero

Impostiamo il valore di border-image-width su 2 al passaggio del mouse sull'elemento. In questo caso il bordo avrà una dimensione di 26px*2 - 2 volte più grande della sua larghezza, specificata in border-width. Il bordo in questo caso si sovrapporrà al testo (come uno sfondo):

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

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

Результат:

Esempio . Cambiamo border-image-repeat in round

Nell'esempio precedente, al passaggio del mouse, nel bordo non ci sarà un numero intero di rombi. Correggiamo questo impostando border-image-repeat al valore round:

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

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

Результат:

Esempio . Percentuali

Impostiamo il valore di border-image-width su 50% al passaggio del mouse sull'elemento. In questo caso il bordo avrà una dimensione di 50% rispetto alla dimensione del blocco (cioè i due bordi, destro e sinistro, copriranno l'intero blocco):

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

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

Результат:

Esempio . Percentuali

Impostiamo il valore di border-image-width su 30% al passaggio del mouse sull'elemento. In questo caso il bordo avrà una dimensione di 30% rispetto alla dimensione del blocco:

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

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

Результат:

Esempio . Pixel

Impostiamo il valore di border-image-width su 50px al passaggio del mouse sull'elemento:

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

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

Результат:

Esempio . Valore auto

Impostiamo il valore di border-image-width su auto al passaggio del mouse sull'elemento.

Prima del passaggio del mouse, border-image-width ha valore 1 (predefinito). Nell'esempio border-width è specificatamente impostato su 52px, e border-image-slice - sul valore 26 (l'effetto con auto sarà osservato solo se border-width non è uguale a border-image-slice). A causa del fatto che border-image-width ha valore 1, l'immagine del bordo occuperà l'intera larghezza di border-width, cioè si estenderà per 52px. Al passaggio del mouse il valore di border-image-width si imposterà su auto e la larghezza dell'immagine diventerà uguale al valore di border-image-slice, cioè 26px:

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

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

Результат:

Vedi anche