CSS box-decoration-break
La proprietà CSS3 box-decoration-break controlla la decorazione dei box divisi su più righe o colonne
La proprietà box-decoration-break definisce se decorazioni come bordi, padding e sfondi devono essere applicati solo all’inizio e alla fine di un elemento (slice) o su ogni singolo frammento (clone). È utile nei layout inline, multi-column o con breaks forzati.
Sintassi
Significato dei valori principali:
-
slice: (valore predefinito) considera l’elemento come un singolo box continuo. Il padding e il bordo vengono applicati solo all'inizio e alla fine dell’intero elemento.
-
clone: applica padding, margini e bordi a ogni frammento visivo (es. quando il contenuto è spezzato tra righe o colonne).
Esempio proprietà: box-decoration-break
Codice Esempio: box-decoration-break
.decoration-slice,.decoration-clone {
display: inline;
padding: 10px;
border: 3px dashed #e67e22;
background-color: #fdebd0;
font-weight: bold;
line-height: 2;
font-size: 22px;
}.decoration-slice {
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}.decoration-clone {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
Contenuto Esempio: box-decoration-break
Esempio di utilizzo di box-decoration-break
In questo esempio, la proprietà box-decoration-break viene applicata a uno span multilinea con display: inline, per mostrare la differenza tra slice e clone.
box-decoration-break: slice
Questo testo è abbastanza lungo da andare su più righe, e la decorazione viene applicata come se fosse un unico box.box-decoration-break: clone
Questo testo è abbastanza lungo da andare su più righe, ma ogni riga riceve la sua decorazione completa.CSS e HTML per la decorazione dei frammenti:
<style>
.decoration-slice,
.decoration-clone {
display: inline;
padding: 10px;
border: 3px dashed #e67e22;
background-color: #fdebd0;
font-weight: bold;
line-height: 2;
font-size: 22px;
}
.decoration-slice {
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}
.decoration-clone {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.container {
width: 220px;
margin-bottom: 40px;
}
</style>
<div class="container">
<p><strong>box-decoration-break: slice</strong></p>
<span class="decoration-slice">
Questo testo è abbastanza lungo da andare su più righe...
</span>
</div>
<div class="container">
<p><strong>box-decoration-break: clone</strong></p>
<span class="decoration-clone">
Questo testo è abbastanza lungo da andare su più righe...
</span>
</div>
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.108
