La proprietà border-image-slice nei CSS

La proprietà border-image-slice dice al browser che parte dell'immagine verrà utilizzata per gli angoli, e quali per i lati (e che parte che sarà al centro). Agli angoli vanno quattro parti, ai lati vanno anche 4 parti e una parte (centrale) va alla applicata come lo sfondo (opzionale, parola chiave fill).
L'immagine che vogliamo utilizzare per il bordo, dovrebbe essere strutturata in modo speciale: 4 mini immagini per gli angoli e 4 immagini per i lati .

Un esempio di tale immagine per border-image-slice:

border image
In questo caso, la parte centrale è stata lasciata in bianco (perché non vogliamo che copre lo sfondo del nostro elemento di applicazione della proprietà border-image-slice ).

E un altro esempio d' immagine con la parte centrale colorata:
border image fill

border image fill
L'immagine viene "taglia” in pezzi come segue: per la proprietà border-image-slice vengono indicati da uno a quattro valori.

Vediamo un esempio.

Supponiamo che sono indicati I seguenti valori: 10 20 30 40 (valori in pixel px non vengono specificate, è dovuto al fatto che l'immagine può essere un raster e vettoriale). I nostri valori indicati dicono il seguente : 10 - 10px tagliare dalla parte superiore, 20 - 20px taglio a destra, 30 - 30px tagliare in basso , 40 - 40px taglio sulla sinistra.

Quale parte dell'immagine finira nel angolo in alto a sinistra ? Questo sarà un pezzo: 10px in alto, 40px a sinistra. Nell'angolo in alto a destra finira ha colpito la parte 10px in alto , 20px a destra. E così via.
Il più delle volte, l'immagine è simmetrica (come rombi di cui sopra) e abbiamo bisogno di tagliare pezzi uguali negli angoli. In questo caso, si specifica solo un valore, che consentirà di definire lo stesso offset su tutti I latti Per tagliare i rombi arancioni , specifichiamo border-image-slice: 26 (dato che le dimensioni del nostro rombo arancione sono 26px per 26px). I rombi gialli finiranno alle linea di confine e con loro accadrà quanto segue: o saranno allungati per l'intera lungezza del blocco o saranno ripetuti lungo il bordo (a seconda del valore della proprietà border-image-repeat)

 

<style>
#es1{
border-image-source: url("/images/css/border-image.png");
border-image-slice: 26;
border-image-repeat: stretch;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0px auto;
}
</style>
<div class="example"></div>

<style>
#es2{
border-image-source: url("/images/css/border-image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0px auto;
}
</style>
<div class="example"></div>

Proprieta border-image-repeat

Sinatsi

border-image-repeat: stretch | repeat | round | space;
Valori
Si può indicare 1 o 2 parametri. Se si impostano due parametri, il primo imposterà i limiti superiore e inferiore, e il secondo valore sara per la parte sinistra e destra.

Valore Descrizione
stretch Allunga il disegno del bordo per lunghezza dell'elemento. Questo valore viene utilizzato per impostazione predefinita.
repeat Ripete il disegno scelto per il bordo.
round Ripete l'immagine e la scala in modo che sul bordo dell'elemento appare quantità intera del immagine.
space  

Esempi

1.Valore strecth di border-image-repeat

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

2.Valore repeat di border-image-repeat

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

3.Valore round di border-image-repeat

Guardando l-esempio sotto vediamo lo stato quando valore del border-image-repeat è impostato come repeat , ma se passi con il puntatore del mouse sopra immagine la vedrai con il valore impostato su round. Nota che prima di passare sopra immagine quantita di rombi non e intera I rombi sono tagliati invece con il valore rounde, vengono rimpiccioliti per raggiungere quantità intera. Cosi funziona il valore round di border-image-repeat:

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

Letto 422 volte