Propiedad de color de contorno CSS
Ejemplo
Establezca un color para el contorno:
div {outline-color: coral;}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
Un contorno es una línea que se dibuja alrededor de los elementos, fuera de los bordes, para que el elemento "resalte".
La outline-color
propiedad especifica el color de un contorno.
Nota: Siempre declare la propiedad de estilo de contorno antes de la
outline-color
propiedad. Un elemento debe tener un contorno antes de cambiar el color del mismo.
Valor por defecto: | invertir si es compatible, de lo contrario color actual |
---|---|
Heredado: | No |
Animable: | si, ver propiedades individuales . Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.outlineColor="#FF0000" |
Consejos y notas
Nota: ¡Los contornos difieren de los bordes ! A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Nota: el valor invert
no es compatible con ningún navegador, excepto Internet Explorer 8.
Sintaxis CSS
outline-color: invert|color|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
invert | Performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value. | |
color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Establezca un color para el contorno con un valor HEX:
div {outline-color: #92a8d1;}
Ejemplo
Establezca un color para el contorno con un valor RGB:
div {outline-color: rgb(201, 76, 76);}
Ejemplo
Establezca un color para el contorno con un valor RGBA:
div {outline-color: rgba(201, 76, 76, 0.3);}
Ejemplo
Establezca un color para el contorno con un valor HSL:
div {outline-color: hsl(89, 43%, 51%);}
Ejemplo
Establezca un color para el contorno con un valor HSLA:
div {outline-color: hsla(89, 43%, 51%, 0.3);}
páginas relacionadas
Tutorial de CSS: esquema de CSS
Referencia CSS: propiedad de contorno
Referencia HTML DOM: propiedad outlineColor