La propiedad CSS box-shadow pinta una o varias sombras alrededor de un elemento sin cambiar el flujo del documento. ShadowStack expone solo valores presentes en la declaración copiada, para comparar directamente vista y código. Cada capa conserva su orden de pintura, estado inset, cuatro longitudes en píxeles, color hexadecimal y opacidad.
Relaciona las cuatro longitudes sin ambigüedad
Después de la palabra inset opcional, ShadowStack escribe desplazamiento X, desplazamiento Y, radio de desenfoque y radio de expansión en ese orden fijo. Los desplazamientos negativos mueven la sombra a izquierda o arriba; los positivos a derecha o abajo. El desenfoque no puede ser negativo. La expansión puede contraer con un valor negativo o ampliar con uno positivo antes del desenfoque. Cada longitud es un píxel entero, incluido cero, por lo que el código no depende de valores omitidos. Cambia un campo cada vez y localiza su token antes de juzgar el resultado visual.
Mantén color y opacidad auditables
El selector aporta un color sRGB hexadecimal estricto de seis dígitos. La opacidad queda como porcentaje entero separado, por lo que cambiar transparencia no altera el color base. La declaración convierte ambos a sintaxis moderna rgb(R G B / A): cero y uno son extremos exactos y los porcentajes intermedios usan un decimal de hasta dos cifras. Esta conversión estable produce CSS idéntico para la misma entrada. No realiza gestión de color, predicción de mezcla, análisis de contraste ni conversión a token de diseño.
Verifica el CSS en su componente real
ShadowStack representa la declaración copiada con el motor actual del navegador, pero la vista previa no certifica compatibilidad ni accesibilidad. Pega la propiedad en el componente real y prueba cada navegador, ancho adaptable, fondo y contenedor con overflow compatible. Un desenfoque amplio puede quedar recortado por un ancestro y una sombra inset puede cubrir contenido o indicadores de foco. Revisa el foco de teclado en cada estado, mide el contraste de texto y controles con una herramienta dedicada y conserva un borde u otra distinción cuando la interfaz dependa de límites claros. La cápsula no guarda ajustes ni historial; conserva el CSS aceptado en tu hoja con control de versiones antes de recargar.