CSS border-image-source
La proprietà CSS border-image-source definisce l'immagine del bordo
La proprietà border-image-source specifica l'immagine che viene utilizzata per il bordo di un elemento. È possibile indicare un URL o un percorso dell'immagine che verrà applicato come bordo, permettendo di personalizzare l'aspetto del bordo in modo creativo e visivamente interessante.
Sintassi
Significato dei valori principali:
-
url(image): specifica l'URL dell'immagine da utilizzare come bordo dell'elemento. Può essere un percorso relativo o assoluto verso un file immagine.
-
none: non viene applicata alcuna immagine come bordo (è il valore predefinito).
Esempio proprietà: border-image-source
Codice Esempio: border-image-source
.border-image-source-example {
width: 300px;
height: 200px;
border: 20px solid transparent; /* Il bordo deve esistere per applicare l'immagine */
border-image-source: url('https://www.example.com/border-image.png'); /* Immagine del bordo */
border-image-slice: 30;
border-image-repeat: round;
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-image-source
Esempio di utilizzo di border-image-source
In questo esempio, la proprietà border-image-source viene utilizzata per definire l'immagine da applicare come bordo. È necessario specificare anche border, border-image-slice e altre proprietà correlate per rendere visibile il bordo.
CSS e HTML per l'elemento con bordo immagine personalizzato:
<style>
.border-image-source-example {
width: 300px;
height: 200px;
border: 20px solid transparent; /* Il bordo deve esistere per applicare l'immagine */
border-image-source: url('https://www.example.com/border-image.png'); /* Immagine di bordo */
border-image-slice: 31; /* Specifica le aree dell'immagine da utilizzare */
border-image-repeat: round; /* Ripete l'immagine per adattarla */
padding: 20px;
background-color: #ffc847;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-image-source-example">
Elemento con bordo immagine personalizzato
</div>
Immagine usata per il bordo
Prova questo esempio
DEMO
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
