既存のCSSシャドウの方向を変更します

Question

次のCSSシャドウがあります：

box-shadow:green 0 1px 3px;

さて、私が変更のみを変更したい場合 方向 影の、私は試しました：

box-shadow:inherit 2px 0 inherit;

しかし、これは残念ながら機能しません。また、次のように利用可能な追加のプロパティがあるようには見えません。

box-shadow-direction:2px 0;

または

box-shadow-color:inherit;

---

色や強さを変えることなく、どのように方向を変えることができますか？

Answer 1

私は、サブアトリブのようなものがないことを知っています background-repeat, margin-left, border-bottom 為に box-shadow, text-shadow CSS3 属性。詳細については、参照してください。 http://www.w3.org/tr/css3-background/#box-shadow .

「Box-Shadow」プロパティは、1つ以上のドロップシャドウをボックスに取り付けます。プロパティは、2〜4個の長さの値、オプションの色、およびオプションの「挿入図」キーワードで指定されているシャドウのコンマ区切りリストです。省略された長さは0です。省略された色は、UAが選択した色です。

どこ

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

したがって、サブアトリブをすることはできません box-shadow-direction:2px 0; 定義後 box-shadow HTML要素がITまたは同様のサブアトリブがCSSの次のバージョンに住むようになりました。

Answer 2

ボックスシャドウは次のように定義されています：xy blurスプレッドカラー。

したがって、ボックスシャドウを移動したい場合は、XとYを変更してください。

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

このコードは、上部と左から10pxに配置されたブラックボックスシャドウを作成します。 （スプレッド量を指定する必要はなかったことに注意してください。）