CSS border-image-width
La proprietà CSS border-image-width definisce la larghezza dell'immagine del bordo
La proprietà border-image-width consente di controllare la larghezza dell'immagine applicata come bordo. È possibile specificare un valore in unità di misura (come pixel o percentuale) per determinare quanta parte dell'immagine deve essere utilizzata sui bordi dell'elemento.
Sintassi
Significato dei valori principali:
-
length: specifica la larghezza dell'immagine del bordo in unità di misura (px, em, rem, ecc.).
-
percentage: la larghezza del bordo è espressa come percentuale della dimensione dell'elemento.
Esempio proprietà: border-image-width
Codice Esempio: border-image-width
.border-image-width-example {
width: 300px;
height: 200px;
border: 20px solid transparent; /* La larghezza del bordo deve essere impostata */
border-image-source: url('https://www.example.com/border-image.png'); /* Immagine applicata come bordo */
border-image-slice: 30; /* La porzione dell'immagine da usare */
border-image-width: 50px; /* Definisce la larghezza dell'immagine del bordo */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-image-width
Esempio di utilizzo di border-image-width
In questo esempio, la proprietà border-image-width viene utilizzata per definire quanto spazio occupa l'immagine di bordo intorno a un elemento. Per funzionare correttamente, è necessario impostare anche border, border-image-source e border-image-slice.
CSS e HTML per l'elemento con bordo immagine personalizzato:
<style>
.border-image-width-example {
width: 300px;
height: 200px;
border: 20px solid transparent;
border-image-source: url('https://www.example.com/border-image.png'); /* Immagine di bordo */
border-image-slice: 31; /* Porzione dell'immagine da usare */
border-image-width: 50px; /* Larghezza dell'immagine di bordo */
border-image-repeat: stretch; /* Modalità di ripetizione dell'immagine */
padding: 20px;
background-color: #ffc847;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-image-width-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
