Propiedad de contorno CSS
Ejemplo
Establezca un contorno alrededor de un elemento <h2> y un elemento <div>:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
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
propiedad es una propiedad abreviada para:
- ancho de contorno
- estilo de esquema (requerido)
- contorno-color
Si se omite el color del contorno, el color aplicado será el color del texto.
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.
Valor por defecto: | color medio invertido |
---|---|
Heredado: | No |
Animable: | si, ver propiedades individuales . Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.outline="#0000FF punteado 5px" |
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 | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Sintaxis CSS
outline: outline-width outline-style outline-color|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
outline-width | Specifies the width of outline |
outline-style | Specifies the style of the outline |
outline-color | Specifies the color of the outline |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: esquema de CSS
Referencia HTML DOM: propiedad de contorno