CSS border-image-slice
La proprietà CSS border-image-slice controlla come viene tagliata l'immagine del bordo
La proprietà border-image-slice definisce quanto dell'immagine del bordo deve essere utilizzato per ciascun lato dell'elemento. Puoi specificare una percentuale o una lunghezza per tagliare l'immagine e decidere quanta parte dell'immagine debba coprire il bordo.
Sintassi
Significato dei valori principali:
-
slice: definisce in percentuale o in unità di misura quanto dell'immagine verrà utilizzato per creare il bordo. Ad esempio, un valore di 30% significa che il 30% dell'immagine verrà utilizzato per il bordo.
-
fill: permette di estendere l'immagine per riempire l'intera area del bordo, se l'immagine è più piccola dell'elemento stesso.
Esempio proprietà: border-image-slice
Codice Esempio: border-image-slice
.border-image-slice-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-slice: 20%; /* La proprietà slice indica quanto dell'immagine usare per il bordo */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-image-slice
Esempio di utilizzo di border-image-slice
In questo esempio, la proprietà border-image-slice viene utilizzata per controllare come l'immagine del bordo venga suddivisa per essere applicata correttamente.
CSS e HTML per l'elemento con bordo immagine suddiviso:
<style>
.border-image-slice-example {
width: 300px;
height: 200px;
border: 20px solid transparent;
border-image-source: url('https://www.example.com/border-image.png');
border-image-slice: 15%; /* La porzione dell'immagine da usare */
border-image-repeat: round;
padding: 20px;
background-color: #ffc847;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-image-slice-example">
Elemento con bordo immagine suddiviso
</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
