Generador de Outline CSS
Configuración de esquema
Vista previa en vivo
Acerca del generador de Outline CSS
Este generador de `outline` CSS le ayuda a crear estilos de outline para botones, inputs, tarjetas y estados de foco. Puede ajustar el ancho, el estilo, el color y el `outline-offset`, y luego copiar el CSS final.
A diferencia de los bordes, los outlines no afectan al tamaño del layout. Por eso son útiles para focus rings, estados de accesibilidad y énfasis sin cambiar las dimensiones del elemento.
como usarlo
- Configure el ancho, el estilo, el color y el `outline-offset`.
- Mire la actualización de vista previa en vivo de inmediato.
- Haga clic en Generar para normalizar el valor de `outline`.
- Pegue un valor CSS de `outline` en la entrada y haga clic en Analizar para volver a cargarlo.
Consejos
- Utilice `outline` en estados de foco para que el layout no cambie.
- Un `outline-offset` positivo separa el contorno del elemento.
- Un contorno discontinuo o punteado puede funcionar bien para una interfaz de usuario estilo editor.
- Para mejorar la accesibilidad, use colores de alto contraste para el outline.
Comprobaciones de CSS outline antes de diseñar el foco
Los outlines no ocupan espacio y son esenciales para el foco por teclado; los cambios decorativos no deben ocultarlo.
Mantén el foco visible
No elimines el outline del navegador sin un reemplazo claro para cada elemento interactivo y fondo.
Prueba outline offset
Revisa offsets en esquinas redondeadas, elementos recortados, overflow, controles adyacentes y bordes de pantalla.
Atiende modos de contraste
Verifica indicadores en modo oscuro, forced colors, contraste aumentado y temas personalizados.
Evita recortes
Inspecciona overflow, transforms, regiones sticky, diálogos y scroll containers donde el outline pueda ocultarse.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.