Estaba inspeccionando el sitio codecademy.com y hay un elemento con el atributo:
box-shadow: inset 0 0 5px rgb(0 0 0 / 15%), 0 0 7px #fff;Parece que esto provoca un doble círculo alrededor del elemento, siendo el círculo interior blanco y el exterior transparente.
Sin embargo, cuando trato de usar este código en mi hoja de estilo, aparece el siguiente error:
Error: Function rgb is missing argument $green. on line 1260 of common.scss >> box-shadow: inset 0 0 5px rgb(0 0 0 / 15%), 0 0 7px #fff; ------------------------------------------^No estoy seguro de qué se trata este error o cómo resolverlo. ¿Algunas ideas?
Como dijo Dan Mulin, sass aún no se ha puesto al día con el nuevo estándar, por lo que en lugar de box-shadow: inset 0 0 5px rgb(0 0 0 / 15%) , use box-shadow: inset 0 0 5px rgba(0, 0, 0 , 0.15) Saludos
Aunque las respuestas anteriores funcionan. Hay otra solución .
Solución:
rgb(0 0 0 / 8%) -> RGB(0 0 0 / 8%)Puedes usar rgb por eso viene este error....
Ejemplo:
sombra de caja: 0 1px 4px 0 #0000001a;
El nuevo estándar es usar tres valores sin coma seguidos de una barra oblicua y la opacidad como un porcentaje. Que se parece a esto:
/* New Standard for color using rgb (rgba depreacated) */ rgb(0 0 0 / 0%) /* Old standard for color using rgb and rgba */ rgb(0, 0, 0) rgba(0, 0, 0, 0)Sass no se ha puesto al día con el estándar, por lo que obtendrá un error de compilación cuando intente usar el nuevo formato.
Puede obtener más información aquí: https://drafts.csswg.org/css-color/#rgb-functions