html - 使用列时每个里都有相同的阴影

Question

在我的网站中，我有一部分使用了一定数量的 li，具体取决于条目的数量。

假设有 3 个条目，将生成 3 个 li。当有 4 个条目时，将生成 4 个 li，依此类推。我所做的是为我的 ul 提供一个 columns 值，该值会根据条目的数量而变化。

这一切都完美无缺。但是我现在想要的是在每一里画一个阴影。当我尝试这样做时，只有最后一个 li 会按应有的方式受到影响。有谁知道我该如何改变它？

我的 li 属于 class item。而我尝试应用到它的 css 如下

.item{width:100%; max-width: 290px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
    -ms-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
    -o-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}

希望有人能告诉我如何解决我的问题

编辑

此处要求的是发生的情况的示例。 https://jsfiddle.net/x0u9xao0/

Answer 1

问题是列停在元素的底部，所以你看不到底部阴影(在它下面)
向每个列表元素添加 margin-bottom 意味着该列会继续延伸一些，因此您可以看到底部阴影

参见 fiddle