Día 28: CSS Outline Color
La ruta del desarrollador web frontend autónomo🤹♂️
Table of contents
Color del contorno
La propiedad outline-color se utiliza para establecer el color del contorno.
El color se puede configurar mediante:
Nombre - Especifica un color por nombre como
redHexadecimales - Especifica un valor hexadecimal como
#ff0000RGB - Especifica un valor RGB como
rgb(255,0,0)HSL - Especifica un valor HSL como
hsl(0, 100%, 50%)Invertir - Realiza una inversión de color (lo que garantiza que el contorno sea visible, independientemente del color de fondo)
El siguiente ejemplo muestra algunos contornos diferentes con diferentes colores. Observe también que estos elementos también tienen un borde negro delgado dentro del contorno:
Ejemplo:
Valores hexadecimales
El color del contorno también se puede especificar mediante un valor hexadecimal (HEX):
Ejemplo:
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* rojo */
}
Valores RGB
El color del contorno también se puede especificar mediante un valor RGB:
Ejemplo:
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* rojo */
}
Valores HSL
También puede usar valores HSL:
Ejemplo:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* rojo */
}
Resumen
La propiedad outline-color se utiliza para establecer el color del contorno en CSS. El color se puede configurar mediante nombre, valores hexadecimales, RGB, HSL o inversión de color. Se proporcionan ejemplos de cada uno. También se incluye un borde negro delgado dentro del contorno.
Traducido con 💚 desde W3Schools.com