CSS border-image-repeat
La proprietà CSS border-image-repeat controlla la ripetizione dell'immagine del bordo
La proprietà border-image-repeat permette di specificare come l'immagine del bordo deve essere ripetuta lungo i bordi dell'elemento. Puoi scegliere tra diversi comportamenti di ripetizione, come ripetere l'immagine, ridimensionarla per adattarla al bordo, o non ripeterla affatto.
Sintassi
Significato dei valori principali:
-
repeat: l'immagine del bordo viene ripetuta lungo i bordi dell'elemento, coprendo completamente l'area del bordo.
-
round: l'immagine del bordo viene ripetuta e ridimensionata per coprire uniformemente l'intero bordo, senza lasciare spazi vuoti.
-
space: l'immagine viene ripetuta lungo il bordo, ma con spazi uguali tra le ripetizioni.
-
no-repeat: l'immagine viene applicata una sola volta, senza ripetersi lungo il bordo.
Esempio proprietà: border-image-repeat
Codice Esempio: border-image-repeat
.border-image-repeat-example {
width: 300px;
height: 200px;
border: 20px solid transparent; /* La larghezza del bordo deve essere impostata */
border-image: url('https://www.example.com/border-image.png') 30 round; /* Utilizzo dell'immagine come bordo */
border-image-repeat: space; /* L'immagine del bordo viene ripetuta con spazi tra le ripetizioni */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-image-repeat
Esempio di utilizzo di border-image-repeat
In questo esempio, la proprietà border-image-repeat viene utilizzata per definire come l'immagine del bordo debba ripetersi lungo i bordi di un elemento. Il valore space fa sì che l'immagine venga ripetuta con spazi tra una ripetizione e l'altra.
CSS e HTML per l'elemento con bordo immagine ripetuto:
<style>
.border-image-repeat-example {
width: 300px;
height: 200px;
border: 20px solid transparent;
border-image-source: url('https://www.example.com/border-image.png');
border-image-slice: 31;
border-image-repeat: space; /* Ripetizione con spazi */
padding: 20px;
background-color: #ffc847;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-image-repeat-example">
Elemento con bordo immagine ripetuto
</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: 18.97.14.88
