Manuale di riferimento CSS

Regole CSS (RULES)

Manuale completo delle proprietà CSS

Proprietà border-image-outset di CSS3 Proprietà border-color di CSS

Metodi di utilizzo e esempi dell'attributo border-image CSS3

Come utilizzare l'attributo border-image CSS per sostituire lo stile del bordo con l'immagine. È un attributo abbreviato che consente di impostare contemporaneamenteborder-image-source，border-image-slice，border-image-width，border-image-outseteborder-image-repeatProprietà

La tabella seguente descrive l'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi dell'uso in script JavaScript.

Valore predefinito:	none 100 stretch; Visualizza tutte le proprietà
Applicabile a:	Questa proprietà può essere applicata a qualsiasi elemento, ma quando il valore dell'attributo border-collapse degli elementi tabellari (come tr, th, td) è collapse, la proprietà border-image non è valida. È anche applicabile a::first-letter。
Ereditarietà:	Nessuno
Animabile:	No.Vedere: Proprietà animazione。
Versione:	Nuova funzionalità CSS3
Sintassi JavaScript:	oggetto.style.borderImage="url(border.png) 30 30 round"

Sintassi di utilizzo di border-image

L'attributo è sintatticamente così:

border-image: [ source slice width outset repeat ] | initial | inherit

L'esempio seguente dimostra come utilizzare la proprietà border-image.

Esempio

.box　{
　　　　larghezza:　300px;
　　　　altezza:　150px;
　　　　border:　15px　solid　transparent;
　　　　-webkit-border-image:　url("border.png")　30　30　round;　/*　Safari　3.1-5　*/
　　　　-o-border-image:　url("border.png")　30　30　round;　/*　Opera　11-12.1　*/
　　　　border-image:　url("border.png")　30　30　round;
}

Testa per vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
border-image-source	Specificare la posizione dell'immagine da utilizzare per la cornice.
border-image-slice	Specificare l'offset inwards dal margine superiore, laterale destro, inferiore e laterale sinistro dell'immagine della cornice.
border-image-width	Specificare la larghezza della cornice.
border-image-outset	Specificare la quantità di area dell'immagine della cornice che supera la cornice, la quantità di area in eccesso.
border-image-repeat	Specificare come ridimensionare o mappare l'immagine della cornice centrale in modo che possa adattarsi alle dimensioni della cornice.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore della proprietà border-image del suo elemento padre.

Compatibilità del browser

Compatibilità del browser per la proprietà border-image, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 3.5+ ^-moz-，15 + Google Chrome 4+ ^-webkit-，16 + Internet Explorer 11+ Apple Safari 3.1+ ^-webkit-，6+ Opera 11+ ^-o-，15+ ^-webkit-

Leggi di più

Ecco le seguenti tutorial da consultare：Border CSS3eBorder CSS。

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

Proprietà border-image-outset di CSS3 Proprietà border-color di CSS