css（box-shadow层级问题-相邻元素背景遮盖了阴影） _问题

不操千曲而后晓声，观千剑而后识器。这篇文章主要讲述css：box-shadow层级问题-相邻元素背景遮盖了阴影相关的知识，希望能为你提供帮助。
当box-background元素没有给背景颜色时，box-shadow的阴影可以正常显示

< style> .box height: 100px; line-height: 100px; text-align: center; .box-shadow box-shadow: 0 5px 10px -5px #00ff00; .box-background < /style> < div class="box box-shadow"> box-shadow< /div> < div class="box box-background"> box-background< /div>

文章图片

当box-background元素给定一个背景色之后，box-shadow的阴影就没有了

< style> .box height: 100px; line-height: 100px; text-align: center; .box-shadow box-shadow: 0 5px 10px -5px #00ff00; .box-background /* 增加一个背景色 */ background-color: #f5f5f5; < /style> < div class="box box-shadow"> box-shadow< /div> < div class="box box-background"> box-background< /div>

文章图片

第一时间想到的是给box-shadow加一个z-index属性，不过没有效果，最终解决是让box-shadow相对定位

< style> .box height: 100px; line-height: 100px; text-align: center; .box-shadow box-shadow: 0 5px 10px -5px #00ff00; /* 增加一个定位 */ position: relative; .box-background background-color: #f5f5f5; < /style> < div class="box box-shadow"> box-shadow< /div> < div class="box box-background"> box-background< /div>

【css（box-shadow层级问题-相邻元素背景遮盖了阴影）】