Manuale di riferimento CSS

Regole CSS (RULES)

Completo delle proprietà CSS

Proprietà border-image-source di CSS3 Proprietà border-image-repeat di CSS3

Metodo di utilizzo e esempio dell'attributo CSS3 border-image-slice

L'attributo CSS border-image-sliceborder-image-sourceL'immagine specificata viene divisa in 9 aree: quattro angoli, quattro lati e un'area centrale. Questo viene fatto specificando 4 offset verso l'interno, che di solito creano una griglia 3x3.

La parte centrale dell'immagine di bordo viene scartata e non viene utilizzata dal bordo stesso, mabackground-imageSe è presente la parola chiave fill, utilizzala come immagine di sfondo.

La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi dell'uso di questa proprietà nei script JavaScript.

Valore predefinito:	100%
Applicabile a:	Questa proprietà può essere applicata a qualsiasi elemento, ma quando il valore dell'attributo border-collapse dei elementi tabellari (come tr, th, td) è setto a collapse, l'attributo border-image-slice non è valido. È anche applicabile a::first-letter。
Ereditarietà:	Nessuno
Animabile:	No.Si prega di consultare Proprietà animazione。
Versione:	Nuove funzionalità di CSS3
Sintassi JavaScript:	object.style.borderImageSlice="60% 60%"

Sintassi dell'uso di border-image-slice

La sintassi di questa proprietà è la seguente：

border-image-slice:　[　number　|　percentage　]　1　to　4　values　|　fill　|　initial　|　inherit

Il seguente esempio dimostra come utilizzare l'attributo border-image-slice.

Esempio

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　border-image-source:　url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat:　round;
}

Prova a vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
number	Per le immagini raster, rappresenta la distanza dell'immagine (in pixel), per le immagini vettoriali, rappresenta le coordinate vettoriali.
percentage	Relativo alle dimensioni dell'immagine: la larghezza dell'immagine per l'offset orizzontale, l'altezza dell'immagine per l'offset verticale.
fill	Se esistente, mantiene la parte centrale dell'immagine. Altrimenti, considera la parte centrale come trasparente.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo border-image-slice del suo elemento padre.

Compatibilità del browser

Compatibilità dei browser per l'attributo border-image-slice, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser principali supportano questa proprietà.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

Leggi di più

Si prega di consultare la seguente guida：CSS3 BordereCSS Border。

Proprietà correlate：border-image，border-image-source，border-image-repeat，border-image-width，border-image-outset，border。

Proprietà border-image-source di CSS3 Proprietà border-image-repeat di CSS3