Proprietà CSS border-image-slice

La proprietà CSS border-image-slice definisce come ritagliare l'immagine impostata da border-image-source in modo che il browser possa usarne i pezzi come bordo. L'immagine viene suddivisa in nove regioni: quattro angoli, quattro lati e una parte centrale. È una delle proprietà CSS3.

Immagina due linee orizzontali e due linee verticali tracciate sull'immagine sorgente. Dove si incrociano, dividono l'immagine in una griglia 3×3. Le quattro tessere degli angoli vengono posizionate agli angoli del bordo dell'elemento, le quattro tessere dei lati vengono allungate o ripetute lungo ciascun lato (controllato da border-image-repeat), mentre la tessera centrale viene scartata per impostazione predefinita — rimane completamente trasparente a meno che non si aggiunga la parola chiave fill, nel qual caso viene disegnata dietro il contenuto come un'immagine di sfondo.

border-image-slice è la proprietà che decide dove cadono quelle quattro linee. Da sola non produce alcun effetto visibile; funziona sempre insieme a border-image-source e a un border-width diverso da zero (oppure al border-image-width della forma abbreviata). Ecco perché ogni esempio seguente imposta anche un border trasparente e usa la forma abbreviata border-image per fornire la sorgente.

Come funzionano i valori

La proprietà accetta un number, una percentage e un'eventuale parola chiave fill:

number — un offset del bordo misurato in pixel per le immagini raster (PNG, JPEG) e in coordinate per le immagini vettoriali (SVG). Nota: il numero è privo di unità — scrivi 30, non 30px.
percentage — un offset del bordo espresso come percentuale della dimensione dell'immagine sorgente (la larghezza per i tagli sinistro/destro, l'altezza per quelli superiore/inferiore).
fill — mantiene e visualizza la regione centrale anziché eliminarla.

Puoi fornire da uno a quattro valori di offset. I valori negativi non sono consentiti e gli offset superiori alle dimensioni dell'immagine vengono limitati. I valori seguono il consueto ordine CSS dei lati:

Valori forniti	Significato
`20%`	Tutti e quattro i lati tagliati alla stessa distanza.
`30 50`	Alto e basso = `30`; sinistra e destra = `50`.
`30 50 10`	Alto = `30`; sinistra e destra = `50`; basso = `10`.
`30 50 10 5`	Alto = `30`; destra = `50`; basso = `10`; sinistra = `5` (in senso orario dall'alto).

Quando usarlo?

Usa border-image-slice quando costruisci una cornice decorativa da una singola immagine — bordi ornati, bordi a nastro, pannelli in stile fumetto o grafica a "bolla" arrotondata che deve adattarsi a qualsiasi dimensione dell'elemento senza distorcere gli angoli. Separando gli angoli dalla parte centrale allungabile dei lati, gli angoli rimangono nitidi a qualsiasi larghezza dell'elemento mentre i lati si ripetono o si allungano per adattarsi.

Valore iniziale	100%.
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.borderImageSlice = "10%";

Sintassi

Sintassi della proprietà CSS border-image-slice

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

Esempio della proprietà border-image-slice:

Esempio della proprietà CSS border-image-slice con valore %(percentuale)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 20%.</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Provalo tu stesso »

Risultato

Nell'esempio seguente vengono usati due valori. Il primo valore (30) crea tagli misurati dall'alto e dal basso, mentre il secondo valore (50) crea tagli misurati da sinistra e da destra.

Esempio della proprietà border-image-slice con due valori:

Esempio della proprietà CSS border-image-slice con due valori

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 30 and 50.</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Provalo tu stesso »

Nell'esempio seguente il valore % viene combinato con la parola chiave fill, così la regione centrale scartata dell'immagine viene disegnata anche dietro il contenuto del paragrafo.

Esempio della proprietà border-image-slice con i valori "%" e "fill":

Esempio della proprietà CSS border-image-slice con i valori percentuale e fill

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Prova
number	Rappresenta un offset del bordo in pixel per le immagini raster e in coordinate per le immagini vettoriali.	Prova »
%	Rappresenta un offset del bordo come percentuale della dimensione dell'immagine sorgente.	Prova »
fill	Fa sì che la parte centrale dell'immagine venga visualizzata come immagine di sfondo.	Prova »
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Proprietà correlate

border-image-slice è una delle varie proprietà individuali che compongono la forma abbreviata border-image. Per avere un quadro completo di come vengono costruiti i bordi con immagini, vedi anche:

border-image-source — imposta l'immagine da suddividere.
border-image-width — imposta la larghezza dell'area border-image.
border-image-repeat — controlla come i tagli dei lati vengono allungati, ripetuti o arrotondati.
border-image-outset — spinge l'immagine del bordo oltre il box del bordo.

Esercizio

Pratica

Cosa fa la proprietà border-image-slice in CSS?

Controlla la quantità di campo di input che deve essere all'interno dell'area di testo.Suddivide l'immagine usata per creare un bordo in 9 regioni: 4 angoli, 4 lati e una parte centrale.Viene usata per creare trasformazioni 3D, transizioni e animazioni in HTML e CSS.Definisce come l'immagine del bordo viene riempita e scalata rispetto al box del bordo.