Cambiar la dirección de la sombra CSS existente

Question

Tengo la siguiente sombra de CSS:

box-shadow:green 0 1px 3px;

Ahora, si quiero cambiar solo el dirección de la sombra, lo intenté:

box-shadow:inherit 2px 0 inherit;

Pero esto no funciona desafortunadamente. Además, no parece que haya propiedades adicionales disponibles como:

box-shadow-direction:2px 0;

O

box-shadow-color:inherit;

---

¿Cómo se puede cambiar la dirección sin cambiar el color o la fuerza?

Answer 1

A partir de yo sé que no hay subatributo como background-repeat, margin-left, border-bottom por box-shadow, text-shadow CSS3 atributos. Para más detalles, consulte: http://www.w3.org/tr/css3-background/#box-shadow .

La propiedad 'Box Shadow' adjunta una o más sombras de gota a la caja. La propiedad es una lista de sombras separada por comas, cada una especificada por 2-4 valores de longitud, un color opcional y una palabra clave opcional 'insertado'. Las longitudes omitidas son 0; Los colores omitidos son un color elegido por UA.

Dónde

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

Entonces, no puedes dar un subatributo como box-shadow-direction:2px 0; Después de definir box-shadow a un elemento HTML hasta que su subatributo similar llegó a vivir en las próximas versiones de CSS.

Answer 2

Una sombra de caja se define así: el color de difusión XY Blur.

Entonces, si desea mover la sombra de su caja, cambie su X e Y.

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

Este código crea una sombra de caja negra que se coloca 10px desde la parte superior e izquierda. (Tenga en cuenta que no tuve que especificar el monto de extensión).