shadow - CSSボックス-一方向への影

Question

次のデザインをお願いします。

カスケードシャドウを実現しようとしている方法は次のとおりです。

box-shadow: -6px 0px 10px #514E49

ただし、影が反対方向に表示されます。

h-shadowパラメータをに変更しようとしました6pxが、影は右端にしか表示されません。

Emilが提案したように使用しinsetてみましたが、インセットも表示され、ボックス内に表示されるようになります。これは避ける必要があります。次のようになります。v-shadow

Answer 1

これを試して：

box-shadow:inset 6px 0px 10px #514E49;

編集：

box-shadow: 6px 0px 10px #514E49;
float:right;

http://jsfiddle.net/6V7Et/4/

メニューの順序を逆にする必要があります

Answer 2

float:rightメニューを回避して元に戻す別の方法は、次のように負のスプレッドと増加したhシャドウを使用することです。

.box {
    background: #817E77;
    display: inline-block;
    width: 100px;
    height: 40px;
    box-shadow: inset 10px 0px 10px -4px #514E49;
    float:left;
}

jsFiddleの結果

Answer 3

あなたの問題は他のdivが以前にレンダリングされたものを隠していることなので、これはz-indexで最もよく取り組むことができると思います。

それで：

.box {
    ....your stuff here....
    float:right
}

http://jsfiddle.net/XKNn4/

Answer 4

メニューの順序を逆にしたり使用したりしない別の解決策は、疑似要素z-indexを配置することです。box-shadow

デモ

関連するCSS：

li {
    overflow: hidden;
    position: relative;
    box-shadow: 6px 0px 10px #514E49;
    /* the other styles */
}
li:not(:first-child):after {
    position: absolute;
    right: 100%; width: 100%; height: 100%;
    box-shadow: 6px 0px 10px #514E49;
    content: '';
}