（css）与其他div相比如何显示div

Question

我正在尝试创建一个这样的页面：

所有的事情都很顺利，因为我无法创建第一个与其他div相比看起来有点小的div。它还有一个边框底部阴影。请指导我如何使用CSS创建相似的图像。 感谢..

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;
}

<强> Demo fiddle