Immagine-confine - Trucchi CSS

border-image è una proprietà abbreviata che ti consente di utilizzare un'immagine o un gradiente CSS come bordo di un elemento.

.module ( border-image: url(border.png.webp) 25 25 round; )

La border-imageproprietà può essere applicata a qualsiasi elemento, eccetto gli elementi interni della tabella (ad esempio tr, th, td) quando border-collapseè impostata su collapse.

Proprietà

L'unica proprietà richiesta per la border-imagestenografia è border-image-source. Le altre proprietà vengono impostate sui valori iniziali se non vengono specificati. Queste le border-imageproprietà in ordine:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Questa proprietà specifica l'origine dell'immagine del bordo. Può essere un URL, un URI di dati, un gradiente CSS o un SVG in linea (sebbene il supporto sia limitato per SVG in linea, vedere le note sull'utilizzo di SVG).

Il valore iniziale è none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

I valori di questa proprietà indicano al browser dove "tagliare" l'immagine per creare i pezzi del bordo. L'immagine è divisa in 9 sezioni: i quattro angoli, i quattro lati e il centro.

Otto cuori in un'immagine "cornice", ingrandita per mostrare i dettagli. Le linee rosse indicano le fette.

Se pensi che suoni assurdo, sei in buona compagnia. C'è stata una lunga discussione sull'argomento sul blog di Eric Myer alcuni anni fa, dove hanno pesato molti grandi dello sviluppo del frontend.

In questa demo, un cuore si ripete attorno al bordo del div. L' border-image-sourceimmagine è un'immagine composita di otto della stessa icona del cuore, tagliata in modo che la forma del cuore completo sia utilizzata su ciascun lato dell'elemento.

Guarda la demo Pen border-image: icon border di CSS-Tricks (@ css-tricks) su CodePen.

Altre note sull'utilizzo

Sebbene il supporto per border-imagesia migliorato - è supportato senza prefisso in tutte le versioni correnti del browser - bordervale comunque la pena impostare uno stile di fallback . Il bordo di fallback verrà visualizzato sui browser che non supportano border-imageo se l'immagine non viene caricata.

A differenza di alcune delle altre proprietà del bordo, border-imagenon può essere animato. Inoltre non può essere abbinato a border-radius.

Se si dichiara una border-image-sourceed una borderlarghezza o border-image-widthsenza fette, l'intera immagine unsliced sarà posta ai quattro angoli dell'elemento, scalata a vostra larghezza specificata.

Relazionato

border
border-collapse
box-sizing

Maggiori informazioni

border-image nel modulo CSS Background and Borders Level 3 CR
border-image presso MDN
border-image.com, questo strumento ti consente di caricare un'immagine e giocare con le fette di bordo finché non le ottieni correttamente, quindi genera il CSS per te.
Immagine del bordo spiegata da Dudley Storey.

Altre demo

Sempre da Dudley Storey, Practical border-image: responsive picture frame, a CodePen demo. Questo è un buon esempio dell'utilizzo sensato di un'immagine di bordo su un'immagine reattiva. Si noti che la "cornice" viene rimossa per schermi di dimensioni inferiori.
Veri bordi punteggiati usando SVG e border-image, una penna di Lucas Lemonnier. Una soluzione per il brutto bordo quadrato "punteggiato", questo metodo ti dà dei veri punti rotondi!
pulsante gradiente, una penna di CodePen utente GSSxGSS. Un bell'esempio di gradiente lineare come immagine di bordo.
Film Strip, una penna di Nick Pettit. Forse non è la demo più pratica, questo è un esempio divertente e artistico di ciò che puoi fare con border-image.

Supporto browser

border-imageoriginariamente richiedeva i prefissi del fornitore su tutti i browser che lo supportavano. Ora funziona senza prefisso nell'ultima versione di tutti i browser. Questa tabella mostra sia il primo supporto con prefisso sia il primo supporto non prefisso, ove applicabile.