CSS outline-color
La proprietà CSS outline-color imposta il colore del contorno (CSS3)
La proprietà outline-color definisce il colore del contorno esterno di un elemento. Può essere usata con outline-style e outline-width per creare un contorno visibile e stilizzato attorno a un elemento. Utile per l’accessibilità e per indicare stati di focus nei moduli.
Sintassi
outline-color: color;
Significato dei valori principali:
-
color: rappresenta il colore del contorno. Può essere espresso in:
#hex– esempio:#ff6347rgb()– esempio:rgb(255, 99, 71)hsl()– esempio:hsl(9, 100%, 64%)- parole chiave – esempio:
red,blue,transparent
Esempio proprietà: outline-color
Codice Esempio: outline-color
CODE: CSS
.outline-color-example {
width: 300px;
height: 150px;
outline-width: 4px;
outline-style: solid;
outline-color: #ff6347; /* Colore arancione */
padding: 20px;
background-color: #f9f9f9;
font-size: 18px;
text-align: center;
border-radius: 8px;
color: #333;
}
Contenuto Esempio: outline-color
Esempio di utilizzo di outline-color
In questo esempio, la proprietà outline-color viene usata per impostare il colore del contorno attorno a un elemento:
Contorno con colore personalizzato
CSS e HTML per l'elemento con contorno colorato:
<style>
.outline-color-example {
width: 300px;
height: 150px;
outline-width: 4px;
outline-style: solid;
outline-color: #ff6347; /* Colore arancione */
padding: 20px;
background-color: #f9f9f9;
font-size: 18px;
text-align: center;
border-radius: 8px;
color: #333;
}
</style>
<div class="outline-color-example">
Contorno con colore personalizzato
</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.118
