CSS Contornos
Agrega un contorno a los textos para resaltarlos, decora botones y formularios.
Contornos con CSS
Los contornos o outlines son líneas que se encuentran alrededor de objetos visuales tales como botones, formularios activos o mapeado de imágenes.
Los contornos se diferencian de los bordes en:
- Los contornos no ocupan espacio
- Los contornos no necesariamente son rectangulares
Un contorno definido con la propiedad outline es dibujado "fuera" de la caja y siempre se encuentra por encima del elemento y no afecta a las cajas anexas a este.
El espesor de los contornos
La propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis
<style="type:text/css">
selector {outline-width: valor}
</style>
</head>
Los posibles valores para definir el espesor de los contornos
Ejemplo |
|
Vamos a aplicar un espesor determinado para el contorno de un botón. |
|
|
Código
<head><style type="text/css"> button { outline-width: 3px; outline-style: solid; } </style> </head> <body> <button>Enviar</button> </body> |
Resultado
|
| Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style | |
El estilo de los contornos
La propiedad outline-style especifica el estilo del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis
<style="type:text/css">
selector {outline-style: valor}
</style>
</head>
Los posibles valores para definir el estilo de los contornos
Ejemplo |
|
Vamos a aplicar un estilo determinado para el contorno de un botón. |
|
|
Código
<head><style type="text/css"> button { outline-style: dotted; } </style> </head> <body> <button>Enviar</button> </body> |
Resultado
|
El color de los contornos
La propiedad outline-color especifica el color del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis
<style="type:text/css">
selector {outline-color: valor}
</style>
</head>
Los posibles valores para definir el estilo de los contornos
Ejemplo |
|
Vamos a definir un color determinado para el contorno de un texto. |
|
|
Código
<head><style type="text/css"> p { outline-color: blue; outline-style: solid; } </style> </head> <body> <p>Texto rodeado de un contorno de color azul</p> </body> |
Resultado
Texto rodeado de un contorno de color azul |
| Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style | |
La propiedad general de los contornos
La propiedad outline especifica todas las propiedades de los contornos de una sola vez.
Sintaxis
<style="type:text/css">
selector {outline: valor-1 valor-2 valor-n}
</style>
</head>
Los posibles valores para la propiedad outline
Ejemplo |
|
Vamos a aplicar todos los valores al contorno de un botón. |
|
|
Código
<head><style type="text/css"> button{outline: groove red thick} </style> </head> <body> <button>Enviar</button> </body> |
Resultado
|
| Propiedad | Descripción | Valores | Detalles | Ej. |
|---|---|---|---|---|
| outline | Propiedades individuales de los contornos. No funciona en IE 5, 6 y 7 |
outline-color | Color de la línea | |
| outline-style | Estilo de la línea | |||
| outline-width | Ancho de la línea | |||
| outline-width | Ancho del contorno. No funciona en IE 5, 6 y 7 |
thin | Fino |  |
| medium | Medio | |
||
| thick | Grueso | |
||
| longitud | Longitud | |
||
| outline-style | Estilo del contorno. No funciona en IE 5, 6 y 7 |
none | Nada | |
| hidden | Oculta | |
||
| dotted | Punteada | |
||
| dashed | Líneas de rayas | |
||
| solid | Solida | |
||
| double | Doble | |
||
| groove | Acanalado | |
||
| ridge | En relieve | |
||
| inset | Recuadro | |
||
| outset | Resalte | |
||
| outline-color | Color del contorno. No funciona en IE 5, 6 y 7 |
color | Color | |
| invert | Color inverso al color de fondo | |
<<< Fuentes - Font en CSS Lista - List en CSS >>>