CSS border-image-outset
La proprietà CSS border-image-outset imposta l'offset del bordo immagine
La proprietà border-image-outset consente di estendere l'immagine del bordo oltre i confini dell'elemento. Utilizzando un valore in unità di misura come pixel o em, è possibile far uscire il bordo immagine al di fuori dell'area dell'elemento, creando effetti visivi unici.
Sintassi
Significato dei valori principali:
-
length: definisce la distanza (in unità come px, em, rem, ecc.) che l'immagine del bordo si estende oltre i bordi dell'elemento.
-
auto: il comportamento predefinito, che permette al bordo immagine di essere posizionato in modo automatico, senza estendersi oltre i bordi dell'elemento.
Esempio proprietà: border-image-outset
Codice Esempio: border-image-outset
.border-image-outset-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-outset: 15px; /* L'immagine del bordo si estende oltre l'elemento di 15px */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-image-outset
Esempio di utilizzo di border-image-outset
In questo esempio, la proprietà border-image-outset viene utilizzata per far estendere l'immagine del bordo oltre i bordi dell'elemento.
CSS e HTML per l'elemento con bordo immagine esteso:
<style>
.border-image-outset-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: round;
border-image-outset: 15px; /* Estende il bordo oltre i limiti dell'elemento */
padding: 20px;
background-color: #ffc847;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-image-outset-example">
Elemento con bordo immagine esteso
</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
