Infelizmente, a sombra da caixa deve ser definida como uma regra única, sem a capacidade, como a borda, de ser dividida em partes separadas para posicionamento, cor e distância.
No entanto, existe um truque para permitir que uma única definição de sombra de caixa apareça em várias cores.
A sombra da caixa herda sua cor de um local improvável se nenhum for especificado, o atributo de cor do elemento.
.widget {
-webkit-box-shadow: 0em 0.2em 0em inset;
-moz-box-shadow: 0em 0.2em 0em inset;
box-shadow: 0em 0.2em 0em inset;
}
/* This will also have a red box shadow */
.red.widget {
color: #FF0000;
}
Para obter mais dicas de CSS, visite Semantic UI CSS Guide