CSS box-shadow向一个方向发展

时间:2013-01-20 14:32:30

标签: css shadow css3

我被要求做出以下设计:

enter image description here

以下是我试图实现级联阴影的方法:

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

但是它导致阴影以相反的方向显示:

enter image description here

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

我尝试使用inset作为Emil suggested,但它会导致v-shadow显示插图并在框内变得可见,这应该避免,这就是它的样子:

enter image description here

4 个答案:

答案 0 :(得分:4)

试试这个:

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

编辑:

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

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

你必须颠倒菜单的顺序

答案 1 :(得分:3)

另一种避免float:right并反转菜单的方法是使用负差价和增加的h-shadow,如下所示:

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

jsFiddle result

答案 2 :(得分:1)

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

这样:

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

http://jsfiddle.net/XKNn4/

答案 3 :(得分:0)

另一个不涉及颠倒菜单顺序或使用z-index的解决方案是将box-shadow置于伪元素上。

demo

相关的 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: '';
}