当我们在遇到给一个去除外阴影的话,首先是没有办法去除单边的阴影的
这种问题非常常见
首先我们先看效果图:
这是小米官网的实现效果图,我们可以看出当我们鼠标悬停在上面购物车盒子上的,会有下拉效果的
首先下拉的盒子是定位订上去的,给下面的下拉盒子加阴影的话,他的四周都会有阴影,且下面盒子的使用定位,posation:absolute; 他的层级会变高,上面的阴影部分会将购物车盒子给盖住,实现不了上图的效果。
那我们该怎么办呢?
非常简单
我们可以给购物车盒子加一个相对定位,并且设置z-index,将其的层级设置到比下面盒子高,并且在鼠标悬停的时候将上面的盒子的高度变大,这样上面多出来的盒子高度会将下拉框的上面阴影部分给盖住,这样就实现了上面效果了
具体代码
购物车盒子代码
.top_right .top_shopping {
/* background-color: blue; */
/* padding: 0px 10px; */
height: 40px;
margin-left: 0;
width: 120px;
text-align: center;
display: inline-block;
background-color: rgba(0,0,0,.1);
position: relative;
z-index: 1000;
}
鼠标悬停的时候购物车的代码
.top_right .top_shopping:hover{
height: 42px;
}
这样增加了两个像素,会将他给盖住,实现上图效果