首页 > box-shadow阴影被覆盖问题

box-shadow阴影被覆盖问题

如上图,使用box-shadow发现了一个问题,类似图中上下相连的块级元素如果下方的元素有设置背景就会把上方元素的下阴影给覆盖掉,虽然用position:relativez-index提高层数可以把阴影显示出来,但会影响子元素的absolute定位,所以有没有更好的方法?还有想知道造成这种效果的原因是什么,难道跟BFC有关?

补上正常的效果吧,上图就是箭头所示的外发光被覆盖掉了:

下面是实现图2正常效果的css,想知道有没有除此之外的方法?还有造成图1这种问题的原因?

#topmenu li:hover {
        height: 28px;
        line-height: 28px;
        background: #fff;
        border: 1px solid #dddddd;
        border-right: 0;
        box-shadow: 0 0 10px #ddd;
        -moz-box-shadow: 0 0 10px #ddd;
        -webkit-box-shadow: 0 0 10px #ddd;
        /*显示下边阴影*/
        position: relative;
        z-index: 3;
    }

你的子元素哪用了什么absolute呀?? 此外你在这串css代码里面加个left:0;试试

【热门文章】
【热门文章】