Proprietà border-image-slice CSS

Definizione e uso

L'attributo border-image-slice definisce lo spostamento verso l'interno del bordo dell'immagine.

Vedi anche:

Tutorial CSS3:Bordo CSS3

Esempio

Definisce lo spostamento verso l'interno del bordo dell'immagine:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

Sintassi CSS

border-image-slice: number|%|fill;

Note:Questa proprietà definisce lo spostamento verso l'interno degli spigoli superiori, inferiori, destra e sinistra dell'immagine, che viene divisa in nove aree: quattro angoli, quattro lati e una regione centrale. A meno che non venga utilizzato il termine chiave fill, la parte centrale dell'immagine viene scartata. Se si omette il quarto valore numerico/percentuale, è uguale al secondo valore. Se si omette il terzo valore, è uguale al primo valore. Se si omette il secondo valore, è uguale al primo valore.

Valore dell'attributo

Valore Descrizione
number Valore numerico, che rappresenta i pixel nell'immagine (se è un'immagine raster) o le coordinate vettoriali (se è un'immagine vettoriale).
% Valore percentuale rispetto alle dimensioni dell'immagine: la larghezza influisce sull'offset orizzontale, l'altezza sull'offset verticale.
fill Riserva la parte centrale dell'immagine del bordo.

Dettagli tecnici

Valore predefinito: 100%
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: object.style.borderImageSlice="50% 50%"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

Si prega di consultare border-image proprietà.