Definición de .outline-style aplicado en CSS
La propiedad CSS .outline-style especifica el estilo del esquema de un elemento. ¿Qué es un esquema? Un esquema es una línea que se dibuja alrededor de los elementos, fuera del borde del borde, que se usa para fines de accesibilidad o decoración cuando ese elemento está enfocado.
Ejemplo de uso de outline-style
Si te gustaría emplear esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente manera:
button {
outline-style: dashed;
}Otro ejemplo más avanzado de .outline-style es el siguiente de CODEPEN:
Sintaxis de .outline-style en CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| ninguna | No especifica contorno. esto es por defecto | |
| oculto | Especifica un contorno oculto | |
| punteado | Especifica un contorno punteado | |
| punteado | Especifica un contorno discontinuo | |
| sólido | Especifica un contorno sólido | |
| doble | Especifica un delineador doble | |
| ranura | Especifica un contorno ranurado 3D. El efecto depende del valor del color del contorno. | |
| cresta | Especifica un contorno estriado 3D. El efecto depende del valor del color del contorno. | |
| recuadro | Especifica un contorno de inserción 3D. El efecto depende del valor del color del contorno. | |
| comienzo | Especifica un contorno inicial 3D. El efecto depende del valor del color del contorno. | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .outline-style
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| outline-width | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
