Generador de Outline CSS
Configuración de esquema
esquema
Color
Estado
inactivo
Vista previa en vivo
Vista previa del esquema
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.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de radio de borde CSS
Genere y analice valores de radio de borde CSS con vista previa en vivo.
Utilidades varias
›
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Generador de sombras de texto CSS
Cree, obtenga una vista previa, analice y copie valores de sombra de texto CSS con múltiples capas de sombra.
Utilidades varias
›
Convertidor de colores
Convierta colores HEX, RGB, RGBA y HSL instantáneamente en su navegador.
Utilidades varias
›
Preguntas frecuentes
¿Cuál es la diferencia entre `outline` y `border`?
Los bordes ocupan espacio y afectan al layout. Los outlines se dibujan por fuera del elemento y no cambian su tamaño.
¿Qué hace `outline-offset`?
`outline-offset` controla la distancia entre el borde del elemento y el outline.
¿El `outline` es útil para accesibilidad?
Sí. `outline` se usa habitualmente para estados de foco visibles en botones, enlaces y controles de formulario.
¿Puedo usar un `outline-offset` negativo?
Sí. Los valores negativos empujan el outline hacia dentro, aunque el efecto depende del elemento y del layout.