1

我被要求进行以下设计:

在此处输入图像描述

这是我尝试实现级联阴影的方式:

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

但它会导致阴影显示在相反的方向:

在此处输入图像描述

我尝试将h-shadow参数更改为6px,但阴影仅在最右边可见。

我尝试inset按照Emil 的建议使用,但它也会导致v-shadow显示插图并在框内可见,应该避免这种情况,如下所示:

在此处输入图像描述

4

4 回答 4

4

尝试这个:

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

编辑:

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

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

你必须颠倒菜单的顺序

于 2013-01-20T14:39:00.517 回答
3

另一种避免float:right和反转菜单的方法是使用负传播和增加的 h 阴影,如下所示:

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

jsFiddle 结果

于 2013-01-20T16:08:50.810 回答
1

我相信这最好用 z-index 解决,因为你的问题是其他 div 隐藏了以前渲染的那些。

所以:

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

http://jsfiddle.net/XKNn4/

于 2013-01-20T14:53:57.483 回答
0

另一种不涉及反转菜单顺序或使用的解决方案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: '';
}
于 2013-01-20T15:47:36.967 回答