“＆＃39;列中的项目计数＆＃39; CSS砌体容器 - 分割线条的阴影

Question

我在CSS中使用列计数来为我的项目提供砌体效果。

这工作得很好，但我刚试过给这些物品一个轻微的阴影，如果你看一下jsfiddle，你会发现在容器的底部看起来有一些阴影被剪掉了一些项目的顶部？

我试过给这些物品一个上边距等试图阻止它，但是不能让它起作用。我哪里错了。

问题是最后一项下的三行。

Jsfiddle：http://jsfiddle.net/DTcHh/3930/

备份代码：

.cols {
-moz-column-count:4;
-moz-column-gap: 3%;
-moz-column-width: 25%;
-webkit-column-count:4;
-webkit-column-gap: 3%;
-webkit-column-width: 25%;
column-count: 4;
column-gap: 3%;
column-width: 25%;
}
.item {
height: auto;
width: 100%;
-webkit-column-break-inside: avoid;
-o-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

Answer 1

box-shadow 不应该在商品上。将其取下并放在拇指上

.thumbnail {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

这是fiddle