css - (css) how to display a div up as compared to the other divs

Question

I am trying to create a page like this:

All the things are going fine where as i am not able to create the first div which is looking little a bit up as compared to the other divs. it also has a border-bottom shadow. Please guide me how can i create the similar image using css. Thanks..

Answer 1

第一项的唯一特别之处是创建深度效果的阴影，您可以尝试这样的方法来重现它：

li:first-child{
    background: #ccc;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 15px 0 rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
}

演示小提琴