los outline-color La propiedad CSS establece el color del contorno de un elemento.

Sintaxis

/*  values */outline-color: #f92525;outline-color:rgb(30,222,121);outline-color: blue;/* Keyword value */outline-color: invert;/* Global values */outline-color: inherit;outline-color: initial;outline-color: unset;

los outline-color La propiedad se especifica como cualquiera de los valores que se enumeran a continuación.

Valores

El color del contorno, especificado como .
invert
Para asegurarse de que el contorno sea visible, realiza una inversión de color del fondo. Tenga en cuenta que los navegadores no están obligados a admitir este valor; si no lo hacen, esta palabra clave se considera no válida.

Descripción

Un contorno es una línea que se dibuja alrededor de un elemento, fuera del border. A diferencia del borde del elemento, el contorno se dibuja fuera del marco del elemento y puede superponerse a otro contenido. El borde, por otro lado, alterará el diseño de la página para garantizar que se ajuste sin superponer nada más (a menos que lo establezca explícitamente para que se superponga).

A menudo es más conveniente utilizar la propiedad taquigráfica outline al definir la apariencia de un contorno.

Preocupaciones de accesibilidad

Los estilos de enfoque personalizados suelen implicar la realización de ajustes outline propiedad. Si se ajusta el color del contorno, es importante asegurarse de que la relación de contraste entre este y el fondo sobre el que se coloca el contorno sea lo suficientemente alto como para que las personas con problemas de visión puedan percibirlo.

La relación de contraste de color se determina comparando la luminosidad del texto y los valores de color de fondo. Para cumplir con la corriente Pautas de accesibilidad al contenido web (WCAG), se requiere una proporción de 4.5: 1 para contenido de texto y de 3: 1 para texto más grande, como títulos. El texto grande se define como 18,66 píxeles y en negrita o más grande, o 24 píxeles o más.

Definicion formal

Valor inicial invert, para navegadores que lo admitan, currentColor para el otro
Se aplica a todos los elementos
Heredado no
Valor calculado Para la palabra clave invert, el valor calculado es invert. Para el valor del color, si el valor es translúcido, el valor calculado será el rgba() correspondiente. Si no es así, será el rgb() correspondiente. los transparent mapas de palabras clave a rgba(0,0,0,0).
Tipo de animación un color

Sintaxis formal

| invert
where 
 = ||||  || currentcolor |






where 
 = rgb( 3[ / ]? ) | rgb( 3[ / ]? ) | rgb( #3 , ? ) | rgb( #3 , ? )
 = rgba( 3[ / ]? ) | rgba( 3[ / ]? ) | rgba( #3 , ? ) | rgba( #3 , ? )
 = hsl( [ / ]? ) | hsl( , , , ? )
 = hsla( [ / ]? ) | hsla( , , , ? )
where 
 = |
 = |

Ejemplos de

Establecer un contorno azul sólido

HTML

<p>My outline is blue, as you can see.p>

CSS

poutline: 2px solid;/* Set the outline width and style */outline-color: #0000FF;/* Make the outline blue */margin: 5px;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de interfaz de usuario básica CSS, nivel 3
La definición de ‘color de contorno’ en esa especificación.		 Recomendación Ningún cambio.
CSS Nivel 2 (Revisión 1)
La definición de ‘color de contorno’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
outline-color 1 12 1,51-3,6 8 7 1.2 37 18 4 14 1 1.0
invert No 12-79 1-3 8 7-15 No No No No No No No

Ver también

  • outline
  • outline-color
  • outline-style
  • outline-width
  • los tipo de datos
  • Otras propiedades relacionadas con el color: color, background-color, border-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, y column-rule-color
  • Aplicar color a elementos HTML usando CSS