Mude a direção da sombra CSS existente

Question

Eu tenho a seguinte sombra CSS:

box-shadow:green 0 1px 3px;

Agora, se eu quiser mudar apenas o direção da sombra, eu tentei:

box-shadow:inherit 2px 0 inherit;

Mas isso não funciona, infelizmente. Além disso, não parece que existem propriedades adicionais disponíveis como:

box-shadow-direction:2px 0;

Ou

box-shadow-color:inherit;

---

Como a direção pode ser alterada sem alterar a cor ou a força?

Answer 1

Como eu sei, não há sub-atributo como background-repeat, margin-left, border-bottom por box-shadow, text-shadow CSS3 atributos. Para mais detalhes, consulte: http://www.w3.org/tr/css3-background/#boxhadow .

A propriedade 'Box-Shadow' anexa uma ou mais shadows de queda na caixa. A propriedade é uma lista de sombras separada por vírgula, cada uma especificada por 2-4 valores de comprimento, uma cor opcional e uma palavra-chave 'inserida' opcional. Os comprimentos omitidos são 0; As cores omitidas são uma cor escolhida por UA.

Onde

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Então, você não pode dar um sub-atributo como box-shadow-direction:2px 0; Depois de definir box-shadow a um elemento HTML até que ele ou o sub-atributo similar chegasse ao Live nas próximas versões do CSS.

Answer 2

Uma sombra de caixa é definida assim: XY Blur Spread Color.

Então, se você quiser mover a sombra da sua caixa, altere seu X e Y.

box-shadow: 10px 10px 5px #000;

Este código cria uma sombra de caixa preta que está posicionada a 10px da parte superior e da esquerda. (Observe que eu não precisava especificar a quantidade de spread.)