Proprietà CSS border-image-source
La proprietà CSS border-image-source consente di specificare un'immagine come bordo di un elemento. Guarda esempi e provali tu stesso.
La proprietà CSS border-image-source imposta l'immagine utilizzata per disegnare il bordo di un elemento al posto del normale border-style. Risponde alla domanda "quale immagine deve essere suddivisa e posizionata attorno al box?", mentre le proprietà associate decidono come tale immagine viene ritagliata e disposta.
Questa pagina tratta i valori accettati da border-image-source, come si coordina con le altre proprietà border-image-*, i problemi comuni che fanno scomparire silenziosamente un bordo immagine, e esempi eseguibili che puoi modificare.
border-image-source è una delle proprietà CSS3 e viene quasi sempre impostata insieme a border-image-slice tramite la shorthand border-image.
Quando usarla
Ricorri a un bordo immagine quando un semplice border non riesce a esprimere l'aspetto desiderato — una cornice decorativa, un nastro, un bordo disegnato a mano o un contorno sfumato. Poiché la sorgente può essere qualsiasi immagine, incluso un gradiente CSS, si ottengono effetti che border-color da solo non può produrre.
Come border-image-source si integra con le altre proprietà
border-image-source indica soltanto l'immagine. Quattro proprietà sorelle controllano il resto, e un bordo immagine non viene visualizzato finché non è impostato anche border-image-slice:
border-image-slice— suddivide la sorgente in 9 regioni (4 angoli, 4 bordi, 1 centro).border-image-width— indica lo spessore del bordo immagine disegnato.border-image-outset— indica di quanto l'immagine si estende oltre il border box.css-border-image-repeat-property— stabilisce se le porzioni dei bordi vengonostretch,repeatoround.
Problemi comuni
- Imposta prima un
border. Un bordo immagine riempie l'area definita dal bordo dell'elemento, quindi è comunque necessario unborder-width(in genereborder: 10px solid transparent;). Senza uno spessore del bordo non c'è nulla su cui disegnare. border-image-sliceè obbligatorio. Impostare solo la sorgente non mostra nulla; il browser ha bisogno dei valori di slice per sapere dove si trovano gli angoli.noneo un caricamento fallito ricade suborder-style. Se l'immagine non può essere visualizzata, vengono utilizzati gli stili di bordo normali — assegna all'elemento unborder-stylevisibile come rete di sicurezza.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi, eccetto gli elementi interni delle tabelle quando border-collapse è "collapse". Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.borderImageSource = "url()"; |
Sintassi
Valori di CSS border-image-source
border-image-source: none | image | initial | inherit;Esempio della proprietà border-image-source:
Esempio di codice CSS border-image-source
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 15;
}
</style>
</head>
<body>
<h2>Border-image-source property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
</body>
</html>Risultato
![Descrizione di CSS border-image-source](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source example result" =420x)
Esempio con un gradiente CSS come sorgente
La sorgente non deve necessariamente essere un file — qualsiasi immagine CSS funziona, inclusi i gradienti. Questo disegna una cornice colorata senza alcuna risorsa immagine:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient-border {
border: 12px solid transparent;
padding: 15px;
border-image-source: linear-gradient(45deg, #6610f2, #20c997);
border-image-slice: 1;
}
</style>
</head>
<body>
<p class="gradient-border">A border drawn from a CSS gradient.</p>
</body>
</html>Qui border-image-slice: 1 ritaglia un singolo pixel, che è sufficiente per un gradiente fluido poiché il gradiente si estende su ciascun bordo.
Valori
| Valore | Descrizione |
|---|---|
| none | Non viene usata alcuna immagine; l'elemento ricade sul proprio border-style. Questo è il valore predefinito. |
| image | Qualsiasi <image> CSS: un url() verso un file, oppure un gradiente come linear-gradient(...) / radial-gradient(...). |
| initial | Imposta la proprietà al suo valore predefinito (none). |
| inherit | Eredita il valore dall'elemento padre. |
Proprietà correlate
- border-image — la shorthand per tutte e cinque le proprietà
border-image-*. - border-image-slice — necessario per visualizzare effettivamente l'immagine.
- border-image-width e border-image-outset — dimensione e overflow.
- border-image-repeat — come si ripetono i bordi.