我被要求做出以下设计:
以下是我试图实现级联阴影的方法:
box-shadow: -6px 0px 10px #514E49
但是它导致阴影以相反的方向显示:
我尝试将h-shadow
参数更改为6px
,但之后阴影仅在最右边可见。
我尝试使用inset
作为Emil suggested,但它会导致v-shadow
显示插图并在框内变得可见,这应该避免,这就是它的样子:
答案 0 :(得分:4)
试试这个:
box-shadow:inset 6px 0px 10px #514E49;
编辑:
box-shadow: 6px 0px 10px #514E49;
float:right;
你必须颠倒菜单的顺序
答案 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;
}
答案 2 :(得分:1)
我相信这最好用z-index解决,因为你的问题是其他div隐藏了之前渲染的那些。
这样:
.box {
....your stuff here....
float:right
}
答案 3 :(得分: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: '';
}