Contornos en CSS
Los contornos en CSS son líneas que se colocan alrededor de un elemento, pero no afectan el flujo del documento ni el tamaño del elemento. A diferencia del borde, los contornos pueden aparecer fuera de los márgenes del elemento y no afectan el modelo de caja del elemento.
Se utilizan principalmente para resaltar elementos, como cuando un usuario interactúa con un elemento de un formulario.
Ejemplo de contorno en CSS
Este párrafo tiene un contorno rojo alrededor, sin afectar el tamaño ni el flujo del documento.
...
Propiedades de contorno en CSS
Las propiedades que controlan los contornos son las siguientes:
- outline-color: Define el color del contorno.
- outline-style: Establece el estilo del contorno (por ejemplo, sólido, punteado, etc.).
- outline-width: Determina el grosor del contorno.
- outline-offset: Ajusta la distancia entre el contorno y el borde del elemento.
outline-color
La propiedad outline-color se usa para definir el color del contorno. Puede tomar valores de color como:
- nombre de color: por ejemplo, "red" o "blue".
- HEX: por ejemplo, "#ff0000" para rojo.
- RGB: por ejemplo, "rgb(255, 0, 0)" para rojo.
- HSL: por ejemplo, "hsl(0, 100%, 50%)" para rojo.
Ejemplo:
Este es un ejemplo con un contorno rojo.
outline-style
La propiedad outline-style define el estilo del contorno. Algunos valores comunes son:
- solid: un contorno sólido.
- dotted: un contorno punteado.
- dashed: un contorno discontinuo.
- double: un contorno doble.
- groove: un contorno en relieve.
- ridge: un contorno con bordes elevados.
Ejemplo:
Este es un contorno discontinuo.
Ejemplos Visuales
Este es un contorno sólido.
Este es un contorno punteado.
Este es un contorno discontinuo.
Este es un contorno doble.
Este es un contorno en relieve (groove).
Este es un contorno con bordes elevados (ridge).
outline-width
La propiedad outline-width controla el grosor del contorno. Puede ser especificado en varias unidades como:
- px: píxeles (por ejemplo, "3px").
- em: unidades relativas (por ejemplo, "0.2em").
- rem: unidades relativas a la raíz (por ejemplo, "0.2rem").
Ejemplo:
Este es un contorno con un grosor de 5px.
outline-offset
La propiedad outline-offset se usa para mover el contorno hacia adentro o hacia afuera del borde del elemento. Este espacio es transparente.
Ejemplo:
Este párrafo tiene un contorno desplazado.
outline
La propiedad outline es una propiedad abreviada que permite establecer todas las propiedades relacionadas con el contorno de un solo golpe. Esto incluye el color, el estilo y el grosor del contorno.
Ejemplo:
Este es un ejemplo de contorno abreviado.
Estilos de los contornos en CSS
Los contornos pueden ser aplicados con diferentes estilos para crear efectos visuales interesantes. Algunos estilos incluyen:
- Sólido: Un contorno sólido y uniforme.
- Punteado: Un contorno con puntos.
- Discontinuo: Un contorno con segmentos discontinuos.
- Doble: Un contorno con dos líneas paralelas.
Ejemplos Visuales
Este es un contorno sólido.
Este es un contorno punteado.
Este es un contorno discontinuo.
Este es un contorno doble.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias