CSS border-block-color
La proprietà CSS3 border-block-color imposta il colore dei bordi logici verticale
La proprietà border-block-color permette di specificare il colore del bordo all'inizio e alla fine del blocco (tipicamente i bordi superiore e inferiore). È utile nei layout internazionali perché segue la direzione del testo. Si può usare un solo colore per entrambi i bordi o due colori distinti.
Sintassi
Significato dei valori principali:
-
color (singolo): applica lo stesso colore al bordo di inizio e fine blocco (es.
border-block-color: red;). -
color (doppio): consente di definire due colori distinti, uno per il bordo all'inizio del blocco e uno per la fine (es.
border-block-color: red blue;).
Esempio proprietà: border-block-color
Codice Esempio: border-block-color
.border-block-color-example {
border-block-width: 6px; /* Spessore dei bordi logici */
border-block-style: solid; /* Stile dei bordi logici */
border-block-color: #e63946 #1d3557; /* Colore diverso per inizio e fine blocco */
padding: 20px;
background-color: #f1faee;
font-size: 20px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-block-color
Esempio di utilizzo di border-block-color
In questo esempio, la proprietà border-block-color viene usata per impostare colori diversi al bordo superiore e inferiore:
CSS e HTML per l'elemento con border-block-color:
<style>
.border-block-color-example {
border-block-width: 6px;
border-block-style: solid;
border-block-color: #e63946 #1d3557;
padding: 20px;
background-color: #f1faee;
font-size: 20px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-block-color-example">
Bordi logici con colori diversi
</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
