Proprietà border-image-slice
La proprietà border-image-slice indica
al browser quali parti dell'immagine andranno
agli angoli e quali ai lati (e quale parte
sarà centrale). Agli angoli vanno 4
parti, ai lati vanno 4 parti e una
parte (centrale) va allo sfondo dell'elemento
(opzionalmente, parola chiave fill).
Per informazioni più dettagliate, consulta la proprietà
border-image.
Sintassi
1 a 4 valori numerici | da 1 a 4 percentuali;
}
<-css->
Accanto ai numeri e alle percentuali, separati da uno spazio, può
essere presente la parola chiave fill.
Valori
| Valore | Descrizione |
|---|---|
| percentuali | Le percentuali sono calcolate relative alla dimensione dell'immagine. Le orizzontali relative alla larghezza, le verticali — all'altezza. |
| numeri | I numeri rappresentano pixel (per immagini raster) o coordinate (per immagini vettoriali). Le unità di misura non sono specificate. |
fill |
Il comportamento predefinito prevede che la parte centrale
dell'immagine venga scartata. Per utilizzarla,
è necessario usare la parola chiave fill in aggiunta
ai numeri o alle percentuali.
|
Numero di parametri
L'offset può accettare 1, 2,
3 o 4 parametri. Fai
attenzione al fatto che le unità di misura per
l'offset non sono scritte (ad esempio, semplicemente 20,
e non 20px). È anche possibile impostare lo spessore in %.
| Numero di parametri | Descrizione |
|---|---|
1 |
Spessore per tutti i lati contemporaneamente. |
2 |
1 2; - 1px per l'alto e il basso, 2px per sinistra e destra. |
3 |
1 2 3; - 1px per l'alto, 2px per sinistra e destra, 3px per il basso. |
4 |
1 2 3 4; - 1px per l'alto, 2px per la destra, 3px per il basso, 4px per la sinistra. |
Valore predefinito: 100%(?).
Esempio
<div id="elem"></div>
#elem {
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;
}
:
Esempio
<div id="elem"></div>
#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;
}
:
Vedi anche
-
la proprietà
border-image,
che è la forma abbreviata per il bordo immagine -
la proprietà
border-image-source,
che imposta il percorso dell'immagine per il bordo -
la proprietà
border-image-repeat,
che imposta la ripetizione dell'immagine per il bordo -
la proprietà
border-image-width,
che imposta la dimensione dell'immagine per il bordo -
la proprietà
border-image-outset,
che imposta l'offset dell'immagine per il bordo
