Cambia direzione dell'ombra CSS esistente

Question

Ho la seguente ombra CSS:

box-shadow:green 0 1px 3px;

Ora, se voglio cambiare solo il direzione dell'ombra, ho provato:

box-shadow:inherit 2px 0 inherit;

Ma questo non funziona sfortunatamente. Inoltre non sembra che ci siano proprietà aggiuntive disponibili come:

box-shadow-direction:2px 0;

O

box-shadow-color:inherit;

---

Come può essere cambiata la direzione senza cambiare il colore o la forza?

Answer 1

Quando so che non c'è sotto-attributo come background-repeat, margin-left, border-bottom per box-shadow, text-shadow CSS3 attributi. Per maggiori dettagli, consultare: http://www.w3.org/tr/css3-background/#box-shadow .

La proprietà "Box-Shadow" collega uno o più drop-Shadows alla scatola. La proprietà è un elenco di ombre separato da virgola, ciascuna specificata da valori di lunghezza 2-4, un colore opzionale e una parola chiave "inserti" opzionale. Le lunghezze omesse sono 0; I colori omessi sono un colore scelto da UA.

Dove

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

Quindi, non puoi dare un sub-attributo come box-shadow-direction:2px 0; Dopo aver definito box-shadow a un elemento HTML fino a quando non è arrivato un sub-attributo simile a vivere nelle prossime versioni di CSS.

Answer 2

Un'ombra di scatola è definita in questo modo: XY Blur Spread Color.

Quindi, se vuoi spostare l'ombra della tua scatola, cambia X e Y.

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

Questo codice crea un'ombra della scatola nera posizionata 10px dall'alto e a sinistra. (Si noti che non ho dovuto specificare l'importo dello spread.)