Changer la direction de l'ombre CSS existante

Question

J'ai l'ombre CSS suivante:

box-shadow:green 0 1px 3px;

Maintenant, si je veux changer uniquement le direction de l'ombre, j'ai essayé:

box-shadow:inherit 2px 0 inherit;

Mais cela ne fonctionne pas malheureusement. De plus, il ne semble pas qu'il existe des propriétés supplémentaires disponibles comme:

box-shadow-direction:2px 0;

Ou

box-shadow-color:inherit;

---

Comment la direction peut-elle être modifiée sans changer la couleur ou la force?

Answer 1

Depuis que je sais, il n'y a pas de sous-attribut comme background-repeat, margin-left, border-bottom pour box-shadow, text-shadow CSS3 les attributs. Pour plus de détails, veuillez vous référer: http://www.w3.org/tr/css3-background/#box-shadow .

La propriété «Box-Shadow» attache un ou plusieurs shad-shadows à la boîte. La propriété est une liste d'ombres séparées par des virgules, chacune spécifiée par 2-4 valeurs de longueur, une couleur facultative et un mot-clé facultatif. Les longueurs omises sont 0; Les couleurs omises sont une couleur choisie par UA.

Où

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

Donc, vous ne pouvez pas donner un sous-attribut comme box-shadow-direction:2px 0; Après définir box-shadow à un élément HTML jusqu'à ce qu'il ou un sous-attribut similaire soit venu vivre dans les versions suivantes de CSS.

Answer 2

Une ombre de boîte est définie comme ceci: XY Blur Spread Color.

Donc, si vous voulez déplacer votre ombre de boîte, modifiez votre X et Y.

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

Ce code crée une ombre de boîte noire qui est positionnée 10px du haut et à gauche. (Notez que je n'ai pas eu à spécifier le montant de la propagation.)